Ustawianie opcji kliknięcia i ułatwienia dostępu do znaczników

Gdy znacznik można kliknąć lub przeciągnąć, może on reagować na dane wejściowe klawiatury i myszy. Do poruszania się między znacznikami oraz do przeciągania znaczników możesz używać myszy lub klawiatury. Tekst określony w opcji title jest czytelny dla czytników ekranu.

  • Aby umożliwić klikanie znacznika, ustaw właściwość AdvancedMarkerElement.gmpClickable na true i dodaj moduł obsługi zdarzeń kliknięcia.
  • Aby umożliwić przeciąganie znacznika, ustaw właściwość AdvancedMarkerElement.gmpDraggable na true.
  • Aby ustawić tekst opisu znacznika, użyj opcji AdvancedMarkerElement.title.

Dodaj znacznik do kliknięcia

Poniższy przykład przedstawia mapę z 5 klikalnymi znacznikami, które można zaznaczyć:

Aby poruszać się po znacznikach przy użyciu klawiatury:

  1. Użyj klawisza Tab, aby zaznaczyć pierwszy znacznik. Jeśli na tej samej mapie znajduje się wiele znaczników, przełączaj się między nimi za pomocą klawiszy strzałek.
  2. Jeśli znacznik można kliknąć, naciśnij klawisz Enter, aby „kliknąć”. Jeśli znacznik zawiera okno informacyjne, możesz go otworzyć, klikając, naciskając klawisz Enter lub naciskając spację. Po zamknięciu okna informacyjnego kursor zostanie ponownie ustawiony na powiązany znacznik.
  3. Naciśnij klawisz Tab ponownie, aby kontynuować poruszanie się po innych elementach sterujących mapy.

Wyświetl kod

TypeScript

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

    const map = new Map(document.getElementById("map") as HTMLElement, {
        zoom: 12,
        center: { lat: 34.84555, lng: -111.8035 },
        mapId: '4504f8b37365c3d0',
    });

    // Set LatLng and title text for the markers. The first marker (Boynton Pass)
    // receives the initial focus when tab is pressed. Use arrow keys to
    // move between markers; press tab again to cycle through the map controls.
    const tourStops = [
        {
            position: { lat: 34.8791806, lng: -111.8265049 }, 
            title: "Boynton Pass"
        },
        {
            position: { lat: 34.8559195, lng: -111.7988186 }, 
            title: "Airport Mesa"
        },
        {
            position: { lat: 34.832149, lng: -111.7695277 }, 
            title: "Chapel of the Holy Cross"
        },
        {
            position: { lat: 34.823736, lng: -111.8001857 }, 
            title: "Red Rock Crossing"
        },
        {
            position: { lat: 34.800326, lng: -111.7665047 }, 
            title: "Bell Rock"
        },
    ];

    // Create an info window to share between markers.
    const infoWindow = new InfoWindow();

    // Create the markers.
    tourStops.forEach(({position, title}, i) => {
        const pin = new PinElement({
            glyph: `${i + 1}`,
        });

        const marker = new AdvancedMarkerElement({
            position,
            map,
            title: `${i + 1}. ${title}`,
            content: pin.element,
        });

        // Add a click listener for each marker, and set up the info window.
        marker.addListener('click', ({ domEvent, latLng }) => {
            const { target } = domEvent;
            infoWindow.close();
            infoWindow.setContent(marker.title);
            infoWindow.open(marker.map, marker);
        });
    });
}

initMap();
index.ts

JavaScript

async function initMap() {
  // Request needed libraries.
  const { Map, InfoWindow } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(
    "marker",
  );
  const map = new Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 34.84555, lng: -111.8035 },
    mapId: "4504f8b37365c3d0",
  });
  // Set LatLng and title text for the markers. The first marker (Boynton Pass)
  // receives the initial focus when tab is pressed. Use arrow keys to
  // move between markers; press tab again to cycle through the map controls.
  const tourStops = [
    {
      position: { lat: 34.8791806, lng: -111.8265049 },
      title: "Boynton Pass",
    },
    {
      position: { lat: 34.8559195, lng: -111.7988186 },
      title: "Airport Mesa",
    },
    {
      position: { lat: 34.832149, lng: -111.7695277 },
      title: "Chapel of the Holy Cross",
    },
    {
      position: { lat: 34.823736, lng: -111.8001857 },
      title: "Red Rock Crossing",
    },
    {
      position: { lat: 34.800326, lng: -111.7665047 },
      title: "Bell Rock",
    },
  ];
  // Create an info window to share between markers.
  const infoWindow = new InfoWindow();

  // Create the markers.
  tourStops.forEach(({ position, title }, i) => {
    const pin = new PinElement({
      glyph: `${i + 1}`,
    });
    const marker = new AdvancedMarkerElement({
      position,
      map,
      title: `${i + 1}. ${title}`,
      content: pin.element,
    });

    // Add a click listener for each marker, and set up the info window.
    marker.addListener("click", ({ domEvent, latLng }) => {
      const { target } = domEvent;

      infoWindow.close();
      infoWindow.setContent(marker.title);
      infoWindow.open(marker.map, marker);
    });
  });
}

initMap();
index.js

Aby przywrócić znacznik niemożliwy do kliknięcia, usuń detektor zdarzeń kliknięć:

// Adding the listener.
const clickListener = markerView.addListener('click', () => {...});

// Removing the listener.
google.maps.event.removeListener(clickListener);

Dodawanie znacznika do przeciągania

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ższa przykładowa mapa przedstawia znacznik, który można przeciągnąć, aby po zakończeniu przeciągania wyświetlić jego zaktualizowaną pozycję (jest wywoływane 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 włączyć przeciąganie, naciśnij Option + Spacja lub Opcja + Enter (Mac), ALT + spacja lub Alt + Enter (Windows).
  4. Użyj klawiszy strzałek, aby przenieść znacznik.
  5. Aby upuścić znacznik w nowej lokalizacji, naciśnij spację lub Enter. Spowoduje to też wyłączenie przeciągania.
  6. Aby wyłączyć przeciąganie i przywrócić znacznik do poprzedniej pozycji, naciśnij Esc.

Wyświetl 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ć tekst opisu dla znacznika, który może zostać odczytany przez czytniki ekranu, użyj atrybutu AdvancedMarkerElement.title, jak w tym przykładzie:

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

Po ustawieniu atrybutu title tekst jest widoczny dla czytników ekranu i pojawia się po najechaniu kursorem myszy na znacznik.

Ustaw skalę znacznika

Zwiększenie rozmiaru znaczników zmniejsza precyzję interakcji z nimi na wszystkich urządzeniach – zwłaszcza z ekranami dotykowymi – i zwiększa dostępność. Znaczniki domyślne są zgodne ze standardem minimalnego rozmiaru WCAG AA, ale w przypadku deweloperów, którzy chcą zachować zgodność z rozmiarem docelowym WCAG AAA, należy zwiększyć jego rozmiar. W sekcji dotyczącej podstawowego dostosowywania znaczników znajdziesz informacje o korzystaniu z PinElement oraz zmianie skali znacznika w celu zwiększenia jego rozmiaru.

Oto przykład tworzenia większego znacznika przy użyciu skalowanego znacznika PinElement w górę:

    const pinScaled = new PinElement({
        scale: 2,
    });
    const markerScaled = new AdvancedMarkerElement({
        map,
        position: { lat: 37.419, lng: -122.02 },
        content: pinScaled.element,
    });