ย้ายข้อมูลไปยังเครื่องหมายขั้นสูง

ในวันที่ 21 กุมภาพันธ์ 2024 (เวอร์ชัน 3.56) เราจะเลิกใช้งาน google.maps.Marker พ เราขอแนะนำให้คุณเปลี่ยนไปใช้ google.maps.marker.AdvancedMarkerElement แบบใหม่ เครื่องหมายขั้นสูงมีการปรับปรุงที่สำคัญมากกว่าการทดสอบแบบเดิม google.maps.Marker ชั้นเรียน

ดูข้อมูลเพิ่มเติมเกี่ยวกับการเลิกใช้งานนี้

หากต้องการอัปเดตเครื่องหมายแบบเดิมให้เป็นเครื่องหมายขั้นสูง ให้ทำตามขั้นตอนต่อไปนี้

  1. เพิ่มโค้ดเพื่อนำเข้าคลังเครื่องหมาย โปรดทราบว่าเวอร์ชันก่อนหน้าของ เครื่องหมาย (google.maps.Marker) ไม่ได้ปฏิบัติตามข้อกำหนดนี้
  2. เปลี่ยน google.maps.Marker เป็น google.maps.marker.AdvancedMarkerElement
  3. เพิ่มรหัสแผนที่ลงในรหัสการเริ่มต้นแผนที่ ตัวอย่างเช่น 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 ได้แล้ว ดูข้อมูลเพิ่มเติม เกี่ยวกับทุกอย่างที่คุณทำได้ด้วยเครื่องหมายขั้นสูง