ทําให้สามารถลากเครื่องหมายได้

เมื่อเปิดใช้ความสามารถในการลาก ผู้ใช้จะลากเครื่องหมายบนแผนที่โดยใช้เมาส์ได้ หรือปุ่มลูกศร หากต้องการให้เครื่องหมายลากได้ ให้ตั้งค่า AdvancedMarkerElement.gmpDraggable พร็อพเพอร์ตี้ไปยัง true

แผนที่ตัวอย่างต่อไปนี้แสดงเครื่องหมายที่ลากได้ซึ่งแสดงตำแหน่งที่อัปเดตเมื่อลากเสร็จแล้ว (มีการเรียกเหตุการณ์ dragend)

หากต้องการลากเครื่องหมายด้วยแป้นพิมพ์ ให้ทำดังนี้

1. กดปุ่ม Tab จนกว่าจะโฟกัสที่เครื่องหมาย
2. ใช้แป้นลูกศรเพื่อไปยังเครื่องหมายที่ต้องการ
3. หากต้องการเปิดใช้งานการลาก ให้กด Option + Space หรือ Option + Enter (Mac), Alt + Space หรือ Alt + Enter (Windows)
4. ใช้ปุ่มลูกศรเพื่อย้ายเครื่องหมาย
5. หากต้องการวางเครื่องหมายที่ตำแหน่งใหม่ ให้กด Space หรือ Enter ซึ่งจะเป็นการปิดการลากด้วย
6. หากต้องการปิดการลากและเปลี่ยนเครื่องหมายกลับไปยังตำแหน่งก่อนหน้า ให้กด Esc

ดูรหัส

TypeScript

async function initMap() {
    // Request needed libraries.
    const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

    const map = new Map(document.getElementById('map') as HTMLElement, {
        center: {lat: 37.39094933041195, lng: -122.02503913145092},
        zoom: 14,
        mapId: '4504f8b37365c3d0',
    });

    const infoWindow = new InfoWindow();

    const draggableMarker = new AdvancedMarkerElement({
        map,
        position: {lat: 37.39094933041195, lng: -122.02503913145092},
        gmpDraggable: true,
        title: "This marker is draggable.",
    });
    draggableMarker.addListener('dragend', (event) => {
        const position = draggableMarker.position as google.maps.LatLng;
        infoWindow.close();
        infoWindow.setContent(`Pin dropped at: ${position.lat}, ${position.lng}`);
        infoWindow.open(draggableMarker.map, draggableMarker);
    });

}

initMap();
index.ts

หมายเหตุ: อ่านคำแนะนำเกี่ยวกับการใช้ TypeScript และ Google Maps

JavaScript

async function initMap() {
  // Request needed libraries.
  const { Map, InfoWindow } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const map = new Map(document.getElementById("map"), {
    center: { lat: 37.39094933041195, lng: -122.02503913145092 },
    zoom: 14,
    mapId: "4504f8b37365c3d0",
  });
  const infoWindow = new InfoWindow();
  const draggableMarker = new AdvancedMarkerElement({
    map,
    position: { lat: 37.39094933041195, lng: -122.02503913145092 },
    gmpDraggable: true,
    title: "This marker is draggable.",
  });

  draggableMarker.addListener("dragend", (event) => {
    const position = draggableMarker.position;

    infoWindow.close();
    infoWindow.setContent(`Pin dropped at: ${position.lat}, ${position.lng}`);
    infoWindow.open(draggableMarker.map, draggableMarker);
  });
}

initMap();
index.js

ตั้งค่าข้อความอธิบาย

หากต้องการกำหนดข้อความอธิบายสำหรับเครื่องหมาย ซึ่งโปรแกรมอ่านหน้าจออ่านได้ ให้ใช้ แอตทริบิวต์ AdvancedMarkerElement.title ตามที่แสดงไว้ที่นี่

    const markerView = new google.maps.marker.AdvancedMarkerElement({
        map,
        position: { lat: 37.4239163, lng: -122.0947209 },
        title: "Some descriptive text.",
    });

เมื่อตั้งค่าแอตทริบิวต์ title โปรแกรมอ่านหน้าจอจะเห็นข้อความ และ จะปรากฏขึ้นเมื่อวางเมาส์ไว้เหนือเครื่องหมาย