ทำให้เครื่องหมายคลิกได้และเข้าถึงได้

คุณสามารถทำให้ตัวทำเครื่องหมายเข้าถึงได้มากขึ้นโดยเปิดใช้การจัดการกิจกรรมการคลิก เพิ่มข้อความอธิบายสำหรับโปรแกรมอ่านหน้าจอ และปรับขนาดตัวทำเครื่องหมาย

• เมื่อตัวทำเครื่องหมายคลิกได้ (หรือลากได้) ตัวทำเครื่องหมายจะตอบสนองต่ออินพุตจากแป้นพิมพ์และ เมาส์
• โปรแกรมอ่านหน้าจอจะอ่านข้อความที่ระบุในตัวเลือก title และข้อความจะแสดงขึ้นเมื่อผู้ใช้นำเคอร์เซอร์เมาส์ไปวางเหนือตัวทำเครื่องหมาย
• การเพิ่มขนาดตัวทำเครื่องหมายจะช่วยลดความแม่นยำที่ต้องใช้ในการโต้ตอบกับตัวทำเครื่องหมายในทุกอุปกรณ์ โดยเฉพาะอุปกรณ์หน้าจอสัมผัส และปรับปรุงการช่วยเหลือพิเศษ ตัวทำเครื่องหมายเริ่มต้นเป็นไปตามมาตรฐานขนาดขั้นต่ำ WCAG AA แต่สำหรับนักพัฒนาแอปที่ต้องการปฏิบัติตามมาตรฐานขนาดเป้าหมาย WCAG AAA ควรเพิ่มขนาดตัวทำเครื่องหมาย

ดูการปรับแต่งตัวทำเครื่องหมายเบื้องต้นเพื่อดูวิธีเปลี่ยนขนาดตัวทำเครื่องหมาย เพิ่มข้อความชื่อ และอื่นๆ

ตัวอย่างต่อไปนี้แสดงแผนที่ที่มีตัวทำเครื่องหมาย 5 รายการที่คลิกและโฟกัสได้ ซึ่งมีข้อความชื่อและตั้งค่าขนาดเป็น 1.5 เท่า

วิธีไปยังตัวทำเครื่องหมายโดยใช้แป้นพิมพ์

1. ใช้แป้น Tab เพื่อโฟกัสตัวทำเครื่องหมายแรก หากมีตัวทำเครื่องหมายหลายรายการในแผนที่เดียวกัน ให้ใช้แป้นลูกศรเพื่อเลื่อนดูตัวทำเครื่องหมาย
2. หากตัวทำเครื่องหมายคลิกได้ ให้กดแป้น Enter เพื่อ "คลิก" หากตัวทำเครื่องหมายมีหน้าต่างข้อมูล คุณสามารถเปิดหน้าต่างดังกล่าวได้โดยคลิก หรือกดแป้น Enter หรือ Spacebar เมื่อหน้าต่างข้อมูลปิดลง โฟกัสจะกลับไปที่ตัวทำเครื่องหมายที่เชื่อมโยง
3. กด Tab อีกครั้งเพื่อเลื่อนดูการควบคุมแผนที่ที่เหลือ

ทำให้ตัวทำเครื่องหมายคลิกได้

ส่วนนี้จะแสดงวิธีทำให้ตัวทำเครื่องหมายตอบสนองต่อเหตุการณ์การคลิก วิธีทำให้ตัวทำเครื่องหมายคลิกได้

• ตั้งค่าพร็อพเพอร์ตี้ gmpClickable เป็น true

TypeScript

const pin = new PinElement({
    glyphText: `${i + 1}`,
    scale: 1.5,
});
const marker = new AdvancedMarkerElement({
    position,
    title: `${i + 1}. ${title}`,
    gmpClickable: true,
});
marker.append(pin);
mapElement.append(marker);
index.ts

หมายเหตุ: อ่านคำแนะนำเกี่ยวกับการใช้ TypeScript และ Google Maps

JavaScript

const pin = new PinElement({
    glyphText: `${i + 1}`,
    scale: 1.5,
});
const marker = new AdvancedMarkerElement({
    position,
    title: `${i + 1}. ${title}`,
    gmpClickable: true,
});
marker.append(pin);
mapElement.append(marker);
index.js

• เพิ่ม Listener เหตุการณ์การคลิกเพื่อตอบสนองต่ออินพุตของผู้ใช้

TypeScript

// Add a click listener for each marker, and set up the info window.
marker.addEventListener('gmp-click', () => {
    infoWindow.close();
    infoWindow.setContent(marker.title);
    infoWindow.open(marker.map, marker);
});
index.ts

หมายเหตุ: อ่านคำแนะนำเกี่ยวกับการใช้ TypeScript และ Google Maps

JavaScript

// Add a click listener for each marker, and set up the info window.
marker.addEventListener('gmp-click', () => {
    infoWindow.close();
    infoWindow.setContent(marker.title);
    infoWindow.open(marker.map, marker);
});
index.js

• หากต้องการทำให้ตัวทำเครื่องหมายคลิกไม่ได้อีกครั้ง ให้เรียก removeListener เพื่อนำ Listener เหตุการณ์การคลิกออก

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

วิธีปรับปรุงการช่วยเหลือพิเศษเพิ่มเติม

• ตั้งค่าข้อความอธิบายสำหรับตัวทำเครื่องหมายโดยใช้ตัวเลือก AdvancedMarkerElement.title
• เพิ่มขนาดตัวทำเครื่องหมายโดยใช้พร็อพเพอร์ตี้ scale ของ PinElement

โค้ดตัวอย่างที่สมบูรณ์

ดูซอร์สโค้ดตัวอย่างที่สมบูรณ์

TypeScript

const mapElement = document.querySelector('gmp-map')!;

async function init() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement, PinElement }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('marker'),
        ]);

    // 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({
            glyphText: `${i + 1}`,
            scale: 1.5,
        });
        const marker = new AdvancedMarkerElement({
            position,
            title: `${i + 1}. ${title}`,
            gmpClickable: true,
        });
        marker.append(pin);
        mapElement.append(marker);
        // Add a click listener for each marker, and set up the info window.
        marker.addEventListener('gmp-click', () => {
            infoWindow.close();
            infoWindow.setContent(marker.title);
            infoWindow.open(marker.map, marker);
        });
    });
}

void init();
index.ts

หมายเหตุ: อ่านคำแนะนำเกี่ยวกับการใช้ TypeScript และ Google Maps

JavaScript

const mapElement = document.querySelector('gmp-map');

async function init() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement, PinElement }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('marker'),
        ]);

    // 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({
            glyphText: `${i + 1}`,
            scale: 1.5,
        });
        const marker = new AdvancedMarkerElement({
            position,
            title: `${i + 1}. ${title}`,
            gmpClickable: true,
        });
        marker.append(pin);
        mapElement.append(marker);
        // Add a click listener for each marker, and set up the info window.
        marker.addEventListener('gmp-click', () => {
            infoWindow.close();
            infoWindow.setContent(marker.title);
            infoWindow.open(marker.map, marker);
        });
    });
}

void init();
index.js

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;
}
style.css

HTML

<html>
    <head>
        <title>Advanced Marker Accessibility</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>

        <script>
            // prettier-ignore
            (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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
            });
        </script>
    </head>
    <body>
        <gmp-map
            zoom="12"
            center="34.84555,-111.8035"
            map-id="4504f8b37365c3d0"></gmp-map>
    </body>
</html>
index.html

ลองใช้ตัวอย่าง

JSFiddle.net