ทำตามขั้นตอนต่อไปนี้เพื่อตั้งค่าเครื่องหมายขั้นสูง
รับคีย์ API และเปิดใช้ Maps JavaScript API
ก่อนที่จะใช้เครื่องหมายขั้นสูง คุณต้องมี Cloud โปรเจ็กต์ที่มีบัญชีสำหรับการเรียกเก็บเงินและ Maps JavaScript API เปิดอยู่ ดูข้อมูลเพิ่มเติมได้ในตั้งค่าโปรเจ็กต์ Google Cloud
สร้างรหัสแผนที่
หากต้องการสร้างรหัสแผนที่ใหม่ ให้ทำตามขั้นตอนใน การปรับแต่งระบบคลาวด์ ตั้งค่าประเภทแผนที่เป็น JavaScript แล้วเลือกเวกเตอร์ หรือ แรสเตอร์
อัปเดตรหัสการเริ่มต้นแผนที่
ซึ่งต้องใช้รหัสแผนที่ที่คุณเพิ่งสร้างขึ้น สามารถพบได้ใน 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. } });