Umożliwienie przeciągania znaczników

Gdy ta opcja jest włączona, 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ższa przykładowa mapa pokazuje znacznik, który można przeciągać i który po zakończeniu przeciągania (wywołaniu zdarzenia gmp-dragend) wyświetla swoją zaktualizowaną pozycję:

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

1. Naciskaj klawisz Tab, aż zaznaczenie znajdzie się na znacznikach.
2. Użyj klawisza strzałki, aby przejść do odpowiedniego 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 przesunąć znacznik.
5. Aby upuścić znacznik w nowej lokalizacji, 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.addEventListener('gmp-dragend', () => {
        const position = draggableMarker.position as google.maps.LatLngAltitude;
        infoWindow.close();
        infoWindow.setContent(
            `Pin dropped at: ${String(position.lat)}, ${String(position.lng)}`
        );
        infoWindow.open(draggableMarker.map, draggableMarker);
    });
}

void init();
index.ts

Uwaga: przeczytaj przewodnik dotyczący korzystania z TypeScript i Map Google.

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.addEventListener('gmp-dragend', () => {
        const position = draggableMarker.position;
        infoWindow.close();
        infoWindow.setContent(
            `Pin dropped at: ${String(position.lat)}, ${String(position.lng)}`
        );
        infoWindow.open(draggableMarker.map, draggableMarker);
    });
}

void init();
index.js

Ustaw tekst opisu

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

    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 pojawia się, gdy najedziesz kursorem na znacznik.