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

เมื่อเปิดใช้ความสามารถในการลาก ผู้ใช้จะลากเครื่องหมายบนแผนที่ได้โดยใช้เมาส์ หรือปุ่มลูกศร หากต้องการทำให้เครื่องหมายลากได้ ให้ตั้งค่า 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

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

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 infoWindow = new InfoWindow();

    const draggableMarker = new AdvancedMarkerElement({
        position: { lat: 37.39094933041195, lng: -122.02503913145092 },
        gmpDraggable: true,
        title: 'This marker is draggable.',
    });
    mapElement.append(draggableMarker);

    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

const mapElement = document.querySelector('gmp-map');
async function initMap() {
    // Request needed libraries.
    const { Map, InfoWindow } = (await google.maps.importLibrary('maps'));
    const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));
    const infoWindow = new InfoWindow();
    const draggableMarker = new AdvancedMarkerElement({
        position: { lat: 37.39094933041195, lng: -122.02503913145092 },
        gmpDraggable: true,
        title: 'This marker is draggable.',
    });
    mapElement.append(draggableMarker);
    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 แล้ว โปรแกรมอ่านหน้าจอจะอ่านข้อความได้ และ ข้อความจะปรากฏขึ้นเมื่อวางเมาส์เหนือเครื่องหมาย