Aby zwiększyć dostępność znaczników, włącz obsługę zdarzeń kliknięcia, dodaj tekst opisu dla czytników ekranu i dostosuj skalę znaczników.
- Gdy znacznik jest klikalny (lub przeciągany), może reagować na dane wejściowe klawiatury i myszy.
- Tekst określony w opcji
title
jest czytelny dla czytników ekranu i jest wyświetlany, gdy użytkownik przytrzyma wskaźnik myszy na znaczniku. - 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 z minimalnym rozmiarem WCAG AA, ale deweloperzy, którzy chcą zachować zgodność z rozmiarem docelowym WCAG AAA, trzeba zwiększyć ich rozmiar.
Zobacz podstawowe dostosowywanie znaczników, aby dowiedzieć się, jak zmienić skalę znaczników, dodać tekst tytułu i wykonać inne czynności.
Poniższy przykład przedstawia mapę z 5 klikalnymi znacznikami, które można zaznaczyć, zawierającymi tekst tytułu i ustawionymi na skalę 1,5x:
Aby poruszać się po znacznikach przy użyciu klawiatury:
- 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.
- 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.
- Naciśnij klawisz Tab ponownie, aby kontynuować poruszanie się po innych elementach sterujących mapy.
Dodaj znacznik do kliknięcia
W tej sekcji dowiesz się, jak skonfigurować znaczniki, by reagują na zdarzenia kliknięcia. Aby znacznik był klikalny:
- Ustaw właściwość
gmpClickable
natrue
.
TypeScript
const marker = new AdvancedMarkerElement({ position, map, title: `${i + 1}. ${title}`, content: pin.element, });
JavaScript
const marker = new AdvancedMarkerElement({ position, map, title: `${i + 1}. ${title}`, content: pin.element, });
- Dodaj detektor zdarzeń kliknięć, który będzie odpowiadać na dane wejściowe użytkownika.
TypeScript
// 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); });
JavaScript
// 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); });
Aby przywrócić znacznik niemożliwy do kliknięcia, wywołaj
removeListener
w celu usunięcia detektora zdarzeń kliknięcia:// Remove the listener. google.maps.event.removeListener(clickListener);
Aby jeszcze bardziej zwiększyć dostępność:
- Ustaw tekst opisowy znacznika za pomocą opcji
AdvancedMarkerElement.title
. - Zwiększ skalę znacznika, używając właściwości
scale
PinElement
.
Uzupełnij przykładowy kod
Zobacz pełny przykładowy kod źródłowy
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}`, scale: 1.5, }); 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();
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}`, scale: 1.5, }); 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();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Advanced Marker Accessibility</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script> </body> </html>