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

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

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

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

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

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

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

ทําให้เครื่องหมายคลิกได้

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

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

TypeScript

const marker = new AdvancedMarkerElement({
    position,
    map,
    title: `${i + 1}. ${title}`,
    content: pin.element,
    gmpClickable: true,
});
index.ts

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

JavaScript

const marker = new AdvancedMarkerElement({
  position,
  map,
  title: `${i + 1}. ${title}`,
  content: pin.element,
  gmpClickable: true,
});
index.js

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

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);
});
index.ts

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

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);
});
index.js

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

  // 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();
index.ts

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

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();
index.js

หมายเหตุ: ระบบจะคอมไพล์ JavaScript จากข้อมูลโค้ด TypeScript

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>
  </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>
index.html

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

JSFiddle.net Google Cloud Shell