Làm cho điểm đánh dấu có thể kéo

Khi bạn bật tính năng kéo, người dùng có thể kéo điểm đánh dấu trên bản đồ bằng chuột hoặc các phím mũi tên. Để làm cho một điểm đánh dấu có thể kéo được, hãy đặt thuộc tính AdvancedMarkerElement.gmpDraggable thành true.

Bản đồ ví dụ sau đây cho thấy một điểm đánh dấu có thể kéo được và hiển thị vị trí mới nhất của điểm đánh dấu đó khi bạn kéo xong (sự kiện dragend được kích hoạt):

Cách kéo một điểm đánh dấu bằng bàn phím:

  1. Nhấn phím Tab cho đến khi các điểm đánh dấu được lấy tiêu điểm.
  2. Dùng phím mũi tên để di chuyển đến điểm đánh dấu mong muốn.
  3. Để kích hoạt thao tác kéo, hãy nhấn tổ hợp phím Option + Dấu cách hoặc Option + Enter (Mac), Alt + Dấu cách hoặc Alt + Enter (Windows).
  4. Dùng các phím mũi tên để di chuyển điểm đánh dấu.
  5. Để thả điểm đánh dấu tại vị trí mới, hãy nhấn Dấu cách hoặc Enter. Thao tác này cũng sẽ tắt tính năng kéo.
  6. Để tắt tính năng kéo và đưa điểm đánh dấu về vị trí trước đó, hãy nhấn Esc.

Xem mã

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();

Đặt văn bản mô tả

Để đặt văn bản mô tả cho một điểm đánh dấu (văn bản này có thể được trình đọc màn hình đọc), hãy sử dụng thuộc tính AdvancedMarkerElement.title, như minh hoạ dưới đây:

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

Khi bạn đặt thuộc tính title, văn bản này sẽ hiển thị cho trình đọc màn hình và xuất hiện khi chuột di chuột lên điểm đánh dấu.