Làm cho điểm đánh dấu có thể nhấp và truy cập được

Bạn có thể giúp các điểm đánh dấu dễ tiếp cận hơn bằng cách bật tính năng xử lý sự kiện nhấp chuột, thêm văn bản mô tả cho trình đọc màn hình và điều chỉnh tỷ lệ điểm đánh dấu.

• Khi có thể nhấp vào (hoặc có thể kéo), một điểm đánh dấu có thể phản hồi hoạt động nhập bằng bàn phím và chuột.
• Trình đọc màn hình có thể đọc được văn bản được chỉ định trong tuỳ chọn title, và văn bản này sẽ xuất hiện khi người dùng giữ con trỏ chuột trên điểm đánh dấu.
• Việc tăng kích thước của điểm đánh dấu làm giảm độ chính xác cần thiết để tương tác với điểm đánh dấu trên mọi thiết bị (đặc biệt là các thiết bị màn hình cảm ứng) và cải thiện khả năng hỗ trợ tiếp cận. Các điểm đánh dấu mặc định đáp ứng tiêu chuẩn kích thước tối thiểu của WCAG AA. Tuy nhiên, đối với các nhà phát triển muốn tuân thủ tiêu chuẩn kích thước mục tiêu WCAG AAA, thì bạn nên tăng kích thước điểm đánh dấu.

Xem bài viết tuỳ chỉnh cơ bản về điểm đánh dấu để tìm hiểu cách thay đổi tỷ lệ điểm đánh dấu, thêm văn bản tiêu đề và các thao tác khác.

Ví dụ sau đây cho thấy một bản đồ có 5 điểm đánh dấu có thể làm tâm điểm, nhấp vào được (bao gồm văn bản tiêu đề) và được đặt tỷ lệ 1, 5x:

Cách thao tác với điểm đánh dấu bằng bàn phím:

1. Sử dụng phím thẻ để lấy tiêu điểm vào điểm đánh dấu đầu tiên; nếu có nhiều điểm đánh dấu trên cùng một bản đồ, hãy sử dụng các phím mũi tên để chuyển qua các điểm đánh dấu.
2. Nếu điểm đánh dấu có thể nhấp được, hãy nhấn phím enter để "nhấp". Nếu điểm đánh dấu có cửa sổ thông tin, bạn có thể mở cửa sổ đó bằng cách nhấp hoặc nhấn phím Enter hoặc phím cách. Khi cửa sổ thông tin đóng, tiêu điểm sẽ trở về điểm đánh dấu liên kết.
3. Nhấn phím tab một lần nữa để tiếp tục di chuyển qua các chế độ điều khiển còn lại trên bản đồ.

Tạo điểm đánh dấu có thể nhấp vào

Phần này cho bạn biết cách làm cho điểm đánh dấu phản hồi các sự kiện nhấp chuột. Để tạo một điểm đánh dấu có thể nhấp vào:

• Đặt thuộc tính gmpClickable thành true.

TypeScript

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

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

JavaScript

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

• Thêm trình nghe sự kiện nhấp chuột để phản hồi hoạt động đầu vào của người dùng.

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

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và 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

• Để đánh dấu lại một điểm đánh dấu không thể nhấp vào, hãy gọi removeListener để xoá trình nghe sự kiện nhấp chuột:

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

Để tăng cường hơn nữa khả năng tiếp cận:

• Đặt văn bản mô tả cho điểm đánh dấu bằng cách sử dụng tuỳ chọn AdvancedMarkerElement.title.
• Tăng tỷ lệ điểm đánh dấu bằng cách sử dụng thuộc tính scale của PinElement.

Hoàn tất đoạn mã ví dụ

Xem mã nguồn ví dụ hoàn chỉnh

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,
        });
        // 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

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và 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,
    });

    // 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

Lưu ý: JavaScript được biên dịch từ đoạn mã 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>
    <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>
index.html

Thử mẫu

JSFiddle.net Google Cloud Shell