Włącz możliwość przeciągania znaczników

Gdy opcja przeciągania 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.

Na tej przykładowej mapie widać przeciągany znacznik, który po zakończeniu przeciągania wyświetla swoją zaktualizowaną pozycję (wywołuje to zdarzenie dragend):

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

  1. Naciskaj klawisz Tab, aż znaczniki zostaną zaznaczone.
  2. Użyj klawiszy strzałek, 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 przesuwać znacznik.
  5. Aby umieś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świetlanie kodu

TypeScript

async function initMap() {
    // Request needed libraries.
    const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

    const map = new Map(document.getElementById('map') as HTMLElement, {
        center: {lat: 37.39094933041195, lng: -122.02503913145092},
        zoom: 14,
        mapId: '4504f8b37365c3d0',
    });

    const infoWindow = new InfoWindow();

    const draggableMarker = new AdvancedMarkerElement({
        map,
        position: {lat: 37.39094933041195, lng: -122.02503913145092},
        gmpDraggable: true,
        title: "This marker is draggable.",
    });
    draggableMarker.addListener('dragend', (event) => {
        const position = draggableMarker.position as google.maps.LatLng;
        infoWindow.close();
        infoWindow.setContent(`Pin dropped at: ${position.lat}, ${position.lng}`);
        infoWindow.open(draggableMarker.map, draggableMarker);
    });

}

initMap();
index.ts

JavaScript

async function initMap() {
  // Request needed libraries.
  const { Map, InfoWindow } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const map = new Map(document.getElementById("map"), {
    center: { lat: 37.39094933041195, lng: -122.02503913145092 },
    zoom: 14,
    mapId: "4504f8b37365c3d0",
  });
  const infoWindow = new InfoWindow();
  const draggableMarker = new AdvancedMarkerElement({
    map,
    position: { lat: 37.39094933041195, lng: -122.02503913145092 },
    gmpDraggable: true,
    title: "This marker is draggable.",
  });

  draggableMarker.addListener("dragend", (event) => {
    const position = draggableMarker.position;

    infoWindow.close();
    infoWindow.setContent(`Pin dropped at: ${position.lat}, ${position.lng}`);
    infoWindow.open(draggableMarker.map, draggableMarker);
  });
}

initMap();
index.js

Ustawianie tekstu opisu

Aby ustawić tekst opisowy 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 pojawi się, gdy najedziesz kursorem na znacznik.