ทำตามขั้นตอนต่อไปนี้เพื่อตั้งค่าเครื่องหมายขั้นสูง
รับคีย์ API และเปิดใช้ Maps JavaScript API
ก่อนที่จะใช้ตัวทำเครื่องหมายขั้นสูง คุณต้องมีโปรเจ็กต์ที่อยู่ในระบบคลาวด์ที่มีบัญชีสำหรับการเรียกเก็บเงินและเปิดใช้ Maps JavaScript API ดูข้อมูลเพิ่มเติมได้ในตั้งค่าโปรเจ็กต์ Google Cloud
สร้างรหัสแผนที่
หากต้องการสร้างรหัสแผนที่ใหม่ ให้ทำตามขั้นตอนในการปรับแต่งระบบคลาวด์ ตั้งค่าประเภทแผนที่เป็น JavaScript แล้วเลือกตัวเลือก Vector หรือ Raster
อัปเดตรหัสการเริ่มต้นแผนที่
ซึ่งต้องใช้รหัสแผนที่ที่คุณเพิ่งสร้างขึ้น คุณจะเห็นข้อมูลนี้ในหน้าการจัดการ Maps
โหลดไลบรารีเครื่องหมายขั้นสูงจากภายในฟังก์ชัน
async
เมื่อจำเป็นconst { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
ระบุรหัสแผนที่เมื่อคุณสร้างตัวอย่างแผนที่โดยใช้พร็อพเพอร์ตี้
mapId
ซึ่งอาจเป็นรหัสแผนที่ที่คุณระบุ หรือDEMO_MAP_ID
const map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8, mapId: 'YOUR_MAP_ID' });
ตรวจสอบความสามารถของแผนที่ (ไม่บังคับ)
เครื่องหมายขั้นสูงต้องมีรหัสแผนที่ หากไม่มีรหัสแผนที่ คุณจะไม่สามารถโหลดเครื่องหมายขั้นสูงได้ ขั้นตอนการแก้ปัญหาคือ คุณเพิ่ม Listener mapcapabilities_changed
เพื่อสมัครใช้บริการการเปลี่ยนแปลงความสามารถของแผนที่ได้ การใช้ความสามารถของแผนที่เป็นตัวเลือกที่ไม่บังคับ และแนะนำให้ใช้เพื่อวัตถุประสงค์ในการทดสอบและการแก้ปัญหาเท่านั้น หรือเพื่อวัตถุประสงค์ในการสำรองรันไทม์
// Optional: subscribe to map capability changes. map.addListener('mapcapabilities_changed', () => { const mapCapabilities = map.getMapCapabilities(); if (!mapCapabilities.isAdvancedMarkersAvailable) { // Advanced markers are *not* available, add a fallback. } });