ในวันที่ 21 กุมภาพันธ์ 2024 (เวอร์ชัน 3.56) เราจะเลิกใช้งาน google.maps.Marker เราขอแนะนำให้คุณเปลี่ยนไปใช้ชั้นเรียน google.maps.marker.AdvancedMarkerElement
ใหม่ เครื่องหมายขั้นสูงมีการปรับปรุงที่สำคัญมากกว่าคลาส google.maps.Marker
เดิม
ดูข้อมูลเพิ่มเติมเกี่ยวกับการเลิกใช้งานนี้
หากต้องการอัปเดตเครื่องหมายแบบเดิมให้เป็นเครื่องหมายขั้นสูง ให้ทำตามขั้นตอนต่อไปนี้
- เพิ่มโค้ดเพื่อนำเข้าคลังเครื่องหมาย โปรดทราบว่าเครื่องหมายเวอร์ชันก่อนหน้า (
google.maps.Marker
) ไม่มีข้อกำหนดนี้ - เปลี่ยน
google.maps.Marker
เป็นgoogle.maps.marker.AdvancedMarkerElement
- เพิ่มรหัสแผนที่ลงในรหัสการเริ่มต้นแผนที่ ตัวอย่างเช่น
mapId: 'DEMO_MAP_ID'
เพื่อการทดสอบ หากคุณยังไม่มีรหัสแผนที่
เพิ่มไลบรารีของเครื่องหมายขั้นสูง
วิธีที่คุณใช้โหลดไลบรารีขึ้นอยู่กับวิธีที่หน้าเว็บของคุณโหลด Maps JavaScript API
หากหน้าเว็บใช้การโหลดสคริปต์แบบไดนามิก ให้เพิ่มไลบรารีตัวทำเครื่องหมายและนำเข้า
AdvancedMarkerElement
(และเลือกPinElement
หรือไม่ก็ได้) ขณะรันไทม์ ตามที่แสดงที่นี่const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
หากหน้าเว็บของคุณใช้แท็กการโหลดสคริปต์โดยตรงเดิม ให้เพิ่ม
libraries=marker
ลงในสคริปต์การโหลดดังที่แสดงในข้อมูลโค้ดต่อไปนี้<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker" defer ></script>
ดูข้อมูลเพิ่มเติมเกี่ยวกับการโหลด Maps JavaScript API
ตัวอย่าง
ตัวอย่างโค้ดต่อไปนี้แสดงโค้ดสำหรับการเพิ่มตัวทำเครื่องหมายแบบเดิม ตามด้วยโค้ดสำหรับตัวอย่างเดียวกันที่ใช้ตัวทำเครื่องหมายขั้นสูง
ก่อนย้ายข้อมูล
// The location of Uluru const position = { lat: -25.344, lng: 131.031 }; const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: position, }); // The marker, positioned at Uluru const marker = new google.maps.Marker({ map: map, position: position, title: 'Uluru', });
หลังการย้ายข้อมูล
// The location of Uluru const position = { lat: -25.344, lng: 131.031 }; const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: position, mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers. }); // The advanced marker, positioned at Uluru const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: position, title: 'Uluru', });
สำรวจฟีเจอร์เครื่องหมายขั้นสูง
คุณปรับแต่งเครื่องหมายขั้นสูงได้ในแบบที่ไม่เคยทำได้มาก่อน ตอนนี้คุณปรับขนาด (สเกล) ของเครื่องหมาย รวมถึงเปลี่ยนสีของพื้นหลัง เส้นขอบ และรูปอักขระได้แล้ว รูปภาพกราฟิกที่กำหนดเองจะใช้งานได้ง่ายขึ้น และตอนนี้คุณสามารถเขียนเครื่องหมายที่กำหนดเองโดยใช้ HTML และ CSS ได้แล้ว เรียนรู้เพิ่มเติมเกี่ยวกับทุกอย่างที่คุณทำได้ด้วยเครื่องหมายขั้นสูง