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

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

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

ช่อง

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

ฟิลด์	คลาสสถานที่	Places Service
ไอคอน	---	icon
สีพื้นหลังไอคอน	iconBackgroundColor	icon_background_color
URI ของมาสก์ไอคอน	svgIconMaskURI	icon_mask_base_uri

• icon แสดงผล URL สำหรับไอคอน PNG สีขนาด 71 x 71 พิกเซล (บริการ Places เท่านั้น)
• iconBackgroundColor และ icon_background_color จะแสดงรหัสสีแบบเลขฐาน 16 เริ่มต้นสำหรับหมวดหมู่ของไอคอนสถานที่
• icon_mask_base_uri (บริการ Places) จะแสดงผล URL ฐานสำหรับไอคอนที่ไม่มีสี โดยไม่รวมนามสกุลประเภทไฟล์ (ต่อท้ายด้วย .svg หรือ .png)
• svgIconMaskURI (คลาส Place) จะแสดงผล 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,
    glyphSrc: new URL(String(place.svgIconMaskURI)),
});

const placeIconMarker = new AdvancedMarkerElement({
    position: place.location,
    title: place.displayName,
});
placeIconMarker.append(pinElement);
mapElement.append(placeIconMarker);
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,
    glyphSrc: new URL(String(place.svgIconMaskURI)),
});

const placeIconMarker = new AdvancedMarkerElement({
    position: place.location,
    title: place.displayName,
});
placeIconMarker.append(pinElement);
mapElement.append(placeIconMarker);
index.js

ดูตัวอย่าง

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

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

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