ไอคอนสถานที่

เลือกแพลตฟอร์ม: Android iOS JavaScript บริการบนเว็บ

ไอคอนสถานที่จะระบุสถานที่ประเภทต่างๆ (เช่น ร้านกาแฟ ห้องสมุด และพิพิธภัณฑ์) คุณจะขอไอคอนและสีพื้นหลังได้โดยใช้คลาสสถานที่หรือบริการสถานที่

ช่อง

ใช้ฟิลด์ต่อไปนี้เพื่อทำงานกับไอคอนสถานที่:

ช่อง	ชั้นเรียนที่มี	บริการสถานที่
Icon	---	icon
สีพื้นหลังไอคอน	iconBackgroundColor	icon_background_color
URI ของมาสก์ไอคอน	svgIconMaskURI	icon_mask_base_uri

• icon จะแสดงผล URL ของไอคอน PNG สีขนาด 71 x 71 พิกเซล (บริการสถานที่เท่านั้น)
• iconBackgroundColor และ icon_background_color จะแสดงรหัสสี HEX เริ่มต้นสำหรับหมวดหมู่ของไอคอนสถานที่
• icon_mask_base_uri (Places Service) แสดงผล URL ฐานสำหรับไอคอนที่ไม่มีสีลบด้วยนามสกุลของประเภทไฟล์ (ต่อท้าย .svg หรือ .png)
• svgIconMaskURI (Place Class) แสดงผล URL ฐานสำหรับไอคอน SVG ที่ไม่มีสี

ใช้ไอคอนและสีของสถานที่กับเครื่องหมาย

เมื่อใช้รายละเอียดสถานที่ คุณจะขอไอคอนสถานที่และสีพื้นหลังซึ่งนำไปใช้กับเครื่องหมายได้ ตัวอย่างต่อไปนี้แสดงโค้ดเพื่อสร้างเครื่องหมายโดยใช้ข้อมูลสถานที่โดยการส่ง place.iconBackgroundColor ไปยังตัวเลือก PinElement.background และ place.svgIconMaskURI ไปยัง PinElement.glyph ใช้ place.location เพื่อวางเครื่องหมายในตำแหน่งที่ถูกต้อง ตัวอย่างนี้แสดง place.displayName ในชื่อเครื่องหมายด้วย

TypeScript

// A marker customized using a place icon and color, name, and geometry.
const place = new Place({
    id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
});

// Call fetchFields, passing the desired data fields.
await place.fetchFields({ fields: ['location', 'displayName', 'svgIconMaskURI', 'iconBackgroundColor'] });

const pinElement = new PinElement({
    background: place.iconBackgroundColor,
    glyph: new URL(String(place.svgIconMaskURI)),
});

const placeIconMarkerView = new AdvancedMarkerElement({
    map,
    position: place.location,
    content: pinElement.element,
    title: place.displayName,
});
index.ts

หมายเหตุ: อ่านคู่มือเกี่ยวกับการใช้ TypeScript และ Google Maps

JavaScript

// A marker customized using a place icon and color, name, and geometry.
const place = new Place({
  id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg",
});

// Call fetchFields, passing the desired data fields.
await place.fetchFields({
  fields: [
    "location",
    "displayName",
    "svgIconMaskURI",
    "iconBackgroundColor",
  ],
});

const pinElement = new PinElement({
  background: place.iconBackgroundColor,
  glyph: new URL(String(place.svgIconMaskURI)),
});
const placeIconMarkerView = new AdvancedMarkerElement({
  map,
  position: place.location,
  content: pinElement.element,
  title: place.displayName,
});
index.js

ดูตัวอย่าง

คำขอไอคอนสถานที่และสีพื้นหลัง

ตารางต่อไปนี้แสดงไอคอนสถานที่ที่มีอยู่ทั้งหมดตามหมวดหมู่ โดยค่าเริ่มต้น การแสดงผลเหล่านี้จะแสดงด้วยรูปอักขระสีดำ สีพื้นหลังของไอคอน จะถูกกำหนดตามหมวดหมู่ของสถานที่

หมวดหมู่สถานที่: อาหารและเครื่องดื่ม (สีพื้นหลังไอคอน #FF9E67)
บาร์, ไนท์คลับ	คาเฟ่	ร้านอาหาร, เบเกอรี่
หมวดหมู่สถานที่: ค้าปลีก (สีพื้นหลังไอคอน #4B96F3)
หนังสือ เสื้อผ้า อุปกรณ์อิเล็กทรอนิกส์ เครื่องประดับ รองเท้า ศูนย์การค้า/ห้างสรรพสินค้า	ร้านสะดวกซื้อ	ของชำ, ซูเปอร์มาร์เก็ต	ร้านขายยา
หมวดหมู่สถานที่: บริการ (สีพื้นหลังไอคอน #909CE1)
ตู้เอทีเอ็ม	ธนาคาร	แก๊ส	ที่พัก
ที่ทำการไปรษณีย์
หมวดหมู่สถานที่: บันเทิง (สีพื้นหลังไอคอน #13B5C7)
พิพิธภัณฑ์สัตว์น้ำ นักท่องเที่ยว	กอล์ฟ	ประวัติศาสตร์	ภาพยนตร์
พิพิธภัณฑ์	โรงภาพยนตร์
หมวดหมู่สถานที่: การขนส่ง (สีพื้นหลังไอคอน #10BDFF)
สนามบิน	รถประจำทาง บริการร่วมเดินทาง แท็กซี่	รถไฟ/รถไฟ
หมวดหมู่สถานที่: เทศบาล/ทั่วไป/ศาสนา (สีพื้นหลังไอคอน #7B9EB0)
สุสาน	ศาลากลาง	คลัง	อนุสาวรีย์
ที่จอดรถ	โรงเรียน (ประถมศึกษา มัธยมศึกษา มหาวิทยาลัย)	การสักการะ (คริสเตียน)
สักการะ (ฮินดู)	การสักการะ (ศาสนาอิสลาม)	การสักการะ (เชน)	สักการะ (ชาวยิว)
สักการะ (ซิกข์)	ธุรกิจทั่วไป
หมวดหมู่สถานที่: กลางแจ้ง (สีพื้นหลังไอคอน #4DB546)
การแล่นเรือ	การตั้งแคมป์	อุทยาน	สนามกีฬา
สวนสัตว์
หมวดหมู่สถานที่: ฉุกเฉิน (สีพื้นหลังไอคอน #F88181)
โรงพยาบาล	ตำรวจ