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

Gdy włączona jest przeciąganie, użytkownicy mogą przeciągać znaczniki na mapie za pomocą myszy lub klawiszy strzałek. Aby znacznik można było przeciągać, ustaw AdvancedMarkerElement.gmpDraggable usłudze na true.

Poniższa przykładowa mapa przedstawia znacznik, który można przeciągnąć, który wyświetla jego aktualizację położenie po zakończeniu przeciągania (wywołane jest zdarzenie 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) lub 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. Ten spowoduje też wyłączenie przeciągania.
  6. Aby wyłączyć przeciąganie i przywrócić znacznik do poprzedniej pozycji, naciśnij Esc –

Zobacz kod

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

Ustaw tekst opisu

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

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

Gdy atrybut title jest skonfigurowany, tekst jest widoczny dla czytników ekranu, pojawia się po najechaniu kursorem myszy na znacznik.