Как сделать маркеры перетаскиваемыми

При включенной функции перетаскивания пользователи могут перетаскивать маркеры на карте с помощью мыши или клавиш со стрелками. Чтобы сделать маркер перетаскиваемым, установите свойство AdvancedMarkerElement.gmpDraggable в true .

На приведенном ниже примере карты показан перетаскиваемый маркер, который отображает свое обновленное положение после завершения перетаскивания (срабатывает событие dragend ):

Чтобы перетащить маркер с помощью клавиатуры:

1. Нажимайте клавишу Tab, пока не сфокусируются маркеры.
2. Используйте клавишу со стрелкой, чтобы переместиться к нужному маркеру.
3. Для активации перетаскивания нажмите Option + Space или Option + Enter (Mac), Alt + Space или Alt + Enter (Windows).
4. Для перемещения маркера используйте клавиши со стрелками.
5. Чтобы перетащить маркер в новое место, нажмите пробел или Enter . Это также отключит перетаскивание.
6. Чтобы отключить перетаскивание и вернуть маркер в предыдущее положение, нажмите клавишу Esc .

См. код

Машинопись

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();
index.ts

Примечание: Ознакомьтесь с руководством по использованию TypeScript и Google Maps.

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();
index.js

Установить описательный текст

Чтобы задать описательный текст для маркера, который может быть прочитан программами чтения с экрана, используйте атрибут AdvancedMarkerElement.title , как показано здесь:

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

Если задан атрибут title , текст становится видимым для программ чтения с экрана и появляется при наведении курсора мыши на маркер.