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

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

แผนที่ตัวอย่างต่อไปนี้แสดงตัวทำเครื่องหมายที่ลากได้ซึ่งแสดงตำแหน่งที่อัปเดตเมื่อการลากเสร็จสิ้น (ระบบจะทริกเกอร์เหตุการณ์ gmp-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')!;

async function init() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        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', () => {
        const position = draggableMarker.position!;
        infoWindow.close();
        infoWindow.setContent(`Pin dropped at: ${JSON.stringify(position)}`);
        infoWindow.open(draggableMarker.map, draggableMarker);
    });
}

void init();

JavaScript

const mapElement = document.querySelector('gmp-map');

async function init() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        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', () => {
        const position = draggableMarker.position;
        infoWindow.close();
        infoWindow.setContent(`Pin dropped at: ${JSON.stringify(position)}`);
        infoWindow.open(draggableMarker.map, draggableMarker);
    });
}

void init();

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

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

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

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