Umożliwienie przeciągania znaczników

Gdy włączona jest możliwość przeciągania, użytkownicy mogą przeciągać znaczniki na mapie za pomocą myszy lub klawiszy strzałek. Aby umożliwić przeciąganie znacznika, ustaw właściwość AdvancedMarkerElement.gmpDraggable na true.

Poniższy przykład mapy pokazuje przeciągany znacznik, który wyświetla swoją zaktualizowaną pozycję po zakończeniu przeciągania (wywoływane jest zdarzenie gmp-dragend):

Aby przeciągnąć znacznik za pomocą klawiatury:

  1. Naciskaj klawisz Tab, aż znaczniki zostaną zaznaczone.
  2. Użyj klawisza strzałki, aby przejść do wybranego znacznika.
  3. Aby aktywować przeciąganie, naciśnij Option + Spacja lub Option + Enter (Mac), Alt + Spacja lub Alt + Enter (Windows).
  4. Użyj klawiszy strzałek, aby przenieść znacznik.
  5. Aby upuścić znacznik w nowym miejscu, naciśnij spację lub Enter. Spowoduje to również wyłączenie przeciągania.
  6. Aby wyłączyć przeciąganie i przywrócić znacznik do poprzedniej pozycji, naciśnij Esc.

Wyświetl kod

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

Ustawianie tekstu opisu

Aby ustawić tekst opisu znacznika, który może być odczytywany przez czytniki ekranu, użyj atrybutu AdvancedMarkerElement.title, jak pokazano poniżej:

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

Gdy atrybut title jest ustawiony, tekst jest widoczny dla czytników ekranu i będzie się wyświetlać, gdy kursor myszy najedzie na znacznik.