Aby ułatwić dostęp do znaczników, włącz obsługę zdarzeń kliknięcia, dodaj opisowy tekst 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 najedzie kursorem na znacznik. - Zwiększenie rozmiaru znaczników zmniejsza precyzję interakcji z nim na wszystkich urządzeniach – zwłaszcza tych z ekranem dotykowym – i poprawia dostępność. Znaczniki domyślne są zgodne ze standardem minimalnym rozmiarem WCAG AA, ale w przypadku deweloperów, którzy chcą zachować zgodność ze standardowym rozmiarem docelowym WCAG AAA, rozmiar znacznika należy zwiększyć.
Zobacz podstawowe dostosowywanie znaczników, aby dowiedzieć się, jak zmienić skalę znaczników, dodać tekst tytułu itp.
Poniższy przykład przedstawia mapę z pięcioma klikalnymi znacznikami, które można zaznaczyć, zawierających tekst tytułu i ustawionych na skalę 1,5x:
Aby poruszać się po znacznikach za pomocą klawiatury:
- Użyj klawisza Tab, aby przenieść zaznaczenie na pierwszy znacznik. Jeśli na tej samej mapie jest wiele znaczników, możesz przechodzić między nimi za pomocą klawiszy strzałek.
- Jeśli znacznik jest klikalny, naciśnij klawisz Enter, aby kliknąć. Jeśli znacznik ma okno informacyjne, możesz je otworzyć, klikając albo naciskając klawisz Enter lub spację. Po zamknięciu okna informacyjnego zaznaczenie wróci do powiązanego znacznika.
- Ponownie naciśnij klawisz Tab, aby przejść do kolejnych elementów sterujących mapy.
Ustawianie znacznika jako klikalnego
W tej sekcji pokazujemy, jak znaczniki reagować 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, gmpClickable: true, });
JavaScript
const marker = new AdvancedMarkerElement({ position, map, title: `${i + 1}. ${title}`, content: pin.element, gmpClickable: true, });
- Dodaj detektor zdarzeń kliknięcia, aby 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 ponownie ustawić znacznik jako 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 opis znacznika za pomocą opcji
AdvancedMarkerElement.title
. - Zwiększ skalę znacznika za pomocą właściwości
scale
dla właściwościPinElement
.
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, gmpClickable: true, }); // 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, gmpClickable: true, }); // 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> <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>