คุณสามารถทำให้เครื่องหมายเข้าถึงได้ง่ายขึ้นโดยเปิดใช้การจัดการกิจกรรมการคลิก เพิ่มข้อความอธิบายสำหรับโปรแกรมอ่านหน้าจอ และปรับขนาดของเครื่องหมาย
- เมื่อเครื่องหมายคลิกได้ (หรือลากได้) ก็จะตอบสนองต่อการป้อนข้อมูลด้วยแป้นพิมพ์และเมาส์ได้
- ข้อความที่ระบุในตัวเลือก
title
จะอ่านได้ด้วยโปรแกรมอ่านหน้าจอ และจะแสดงเมื่อผู้ใช้วางตัวชี้เมาส์ไว้เหนือเครื่องหมาย - การเพิ่มขนาดของเครื่องหมายจะช่วยลดความแม่นยำในการโต้ตอบกับเครื่องหมายนี้บนอุปกรณ์ทั้งหมด โดยเฉพาะอุปกรณ์ที่มีหน้าจอสัมผัส และช่วยเพิ่มความสะดวกในการเข้าถึงด้วย ตัวทำเครื่องหมายเริ่มต้นตรงตามมาตรฐานขนาดขั้นต่ำของ WCAG AA แต่นักพัฒนาซอฟต์แวร์ที่ต้องการปฏิบัติตามขนาดเป้าหมาย WCAG AAA ควรเพิ่มขนาดเครื่องหมาย
ดูการปรับแต่งเครื่องหมายพื้นฐานเพื่อเรียนรู้วิธีเปลี่ยนขนาดเครื่องหมาย เพิ่มข้อความชื่อ และอื่นๆ
ตัวอย่างต่อไปนี้แสดงแผนที่ซึ่งมีตัวทำเครื่องหมายที่คลิกได้และโฟกัสได้ 5 รายการซึ่งมีข้อความชื่อ และได้รับการตั้งค่าเป็น 1.5 เท่า
หากต้องการไปยังเครื่องหมายโดยใช้แป้นพิมพ์ ให้ทำดังนี้
- ใช้แป้นแท็บเพื่อโฟกัสที่เครื่องหมายแรก หากมีเครื่องหมายหลายรายการบนแผนที่เดียวกัน ให้ใช้แป้นลูกศรเพื่อวนดูเครื่องหมายต่างๆ
- หากเครื่องหมายคลิกได้ ให้กดปุ่ม Enter เพื่อ "คลิก" หากเครื่องหมายมีหน้าต่างข้อมูล คุณสามารถเปิดได้โดยคลิก หรือโดยกดปุ่ม Enter หรือแป้นเว้นวรรค เมื่อหน้าต่างข้อมูลปิดลง โฟกัสจะกลับไปที่เครื่องหมายที่เกี่ยวข้อง
- กด Tab อีกครั้งเพื่อเลื่อนไปยังส่วนที่เหลือของตัวควบคุมแผนที่
ทำให้เครื่องหมายคลิกได้
ส่วนนี้จะแสดงวิธีทำให้เครื่องหมายตอบสนองต่อกิจกรรมการคลิก วิธีทำให้เครื่องหมายคลิกได้
- ตั้งค่าพร็อพเพอร์ตี้
gmpClickable
เป็นtrue
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, });
- เพิ่ม Listener กิจกรรมการคลิกเพื่อตอบกลับข้อมูลจากผู้ใช้
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); });
ในการทำให้ตัวทำเครื่องหมายคลิกไม่ได้อีกครั้ง ให้เรียกใช้
removeListener
เพื่อนำ Listener เหตุการณ์การคลิกออก โดยทำดังนี้// Remove the listener. google.maps.event.removeListener(clickListener);
ปรับปรุงการช่วยเหลือพิเศษให้ดีขึ้นได้โดยทำดังนี้
- กำหนดข้อความอธิบายสำหรับเครื่องหมายโดยใช้ตัวเลือก
AdvancedMarkerElement.title
- เพิ่มขนาดของเครื่องหมายโดยใช้คุณสมบัติ
scale
ของPinElement
ใส่โค้ดตัวอย่างให้ครบถ้วน
ดูตัวอย่างซอร์สโค้ดที่สมบูรณ์
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> <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>