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

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

• เมื่อเครื่องหมายคลิกได้ (หรือ ลากได้) เครื่องหมายจะตอบสนองต่ออินพุตจากแป้นพิมพ์และ เมาส์
• โปรแกรมอ่านหน้าจอจะอ่านข้อความที่ระบุในตัวเลือก 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 เหตุการณ์ gmp-click เพื่อตอบสนองต่ออินพุตของผู้ใช้

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

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

  • เรียก removeEventListener เพื่อนำ Listener เหตุการณ์ gmp-click ออก

  // Remove the listener.
  marker.removeEventListener('gmp-click', clickListener);
  

  • หรืออีกวิธีหนึ่งคือตั้งค่าพร็อพเพอร์ตี้ gmpClickable เป็น false

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

• ตั้งค่าข้อความอธิบายสำหรับเครื่องหมายโดยใช้ตัวเลือก 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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map
            zoom="12"
            center="34.84555,-111.8035"
            map-id="4504f8b37365c3d0"></gmp-map>
    </body>
</html>
index.html