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

เลือกแพลตฟอร์ม แอนดรอยด์ 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 (ระดับสถานที่) จะแสดง 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)
โรงพยาบาล	ตำรวจ