Places UI Kit: ไลบรารีที่พร้อมใช้งานซึ่งช่วยให้นักพัฒนาซอฟต์แวร์ปรับแต่งและควบคุมได้ ลองใช้ดู แล้วแชร์ความคิดเห็นเกี่ยวกับประสบการณ์การใช้ UI Kit

หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

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

ช่อง

ใช้ช่องต่อไปนี้เพื่อทำงานกับไอคอนสถานที่

ฟิลด์	คลาสสถานที่	บริการ Places
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 (บริการสถานที่) แสดงผล 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

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)
โรงพยาบาล	ตำรวจ