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

Bạn có thể giúp người dùng dễ dàng truy cập vào các điểm đánh dấu 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 điểm đánh dấu có thể nhấp vào (hoặc kéo được), điểm đánh dấu có thể phản hồi thông tin đầu vào từ bàn phím và thao tác đầu vào bằng chuột.
• Trình đọc màn hình có thể đọc được văn bản được chỉ định trong lựa chọn title và văn bản này sẽ hiển thị khi người dùng di chuột lên điểm đánh dấu.
• Việc tăng kích thước của điểm đánh dấu sẽ 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à thiết bị màn hình cảm ứng) và cải thiện khả năng hỗ trợ tiếp cận. Điểm đánh dấu mặc định đáp ứng tiêu chuẩn kích thước tối thiểu theo WCAG AA, nhưng đối với những nhà phát triển muốn tuân thủ tiêu chuẩn kích thước mục tiêu theo WCAG AAA, họ nên tăng kích thước điểm đánh dấu.

Hãy xem phần tuỳ chỉnh cơ bản cho đ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à nhiều nội dung khác.

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

Cách di chuyển giữa các điểm đánh dấu bằng bàn phím:

1. Sử dụng phím tab để tập trung 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 đổi giữa các điểm đánh dấu.
2. Nếu có thể nhấp vào điểm đánh dấu, 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ẽ quay lại điểm đánh dấu được 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 nút điều khiển còn lại trên bản đồ.

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

Phần này hướng dẫn cách làm cho các điểm đánh dấu phản hồi sự kiện nhấp chuột. Để làm cho một điểm đánh dấu có thể nhấp vào, hãy làm như sau:

• Đặt thuộc tính gmpClickable thành 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

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

• Thêm một trình nghe sự kiện nhấp để 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.addEventListener('gmp-click', () => {
    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.addEventListener('gmp-click', () => {
    infoWindow.close();
    infoWindow.setContent(marker.title);
    infoWindow.open(marker.map, marker);
});
index.js

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

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

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

• Đặt văn bản mô tả cho một điểm đánh dấu bằng cách sử dụng lựa 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.

Mã ví dụ hoàn chỉnh

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

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

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

Dùng thử mẫu

JSFiddle.net