Cho phép truy cập vào điểm đánh dấu

Bạn có thể giúp người dùng dễ dàng tiếp cận hơn với các điểm đánh dấu 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 một điểm đánh dấu có thể nhấp, điểm đánh dấu đó có thể phản hồi với dữ liệu đầu vào từ bàn phím và chuột.
• Trình đọc màn hình có thể đọc văn bản được chỉ định trong tuỳ chọn tiêu đề và văn bản đó sẽ xuất hiện khi người dùng di chuột qua đ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 tất cả các 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 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 WCAG AA size , nhưng đố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 target , thì kích thước điểm đánh dấu cần được tăng lên.

Hãy xem phần tuỳ chỉnh điểm đánh dấu cơ bản để 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ể nhấp và có thể lấy tiêu điểm, bao gồm văn bản tiêu đề và được đặt ở tỷ lệ 1, 5x:

JavaScript

async function init() {
    // Import the needed libraries.
    const [{ Marker3DInteractiveElement, PopoverElement }, { PinElement }] =
        await Promise.all([
            google.maps.importLibrary('maps3d'),
            google.maps.importLibrary('marker'),
        ]);

    const map3DElement = document.querySelector('gmp-map-3d');

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

    tourStops.forEach(({ position, title }, i) => {
        const pin = new PinElement({
            glyphText: String(i + 1),
            scale: 1.5,
            glyphColor: '#FFFFFF',
        });
        const popover = new PopoverElement();

        const content = `${String(i + 1)}. ${title}`;
        const header = document.createElement('span');
        // Include the label for screen readers.
        header.ariaLabel = `This is marker ${String(i + 1)}. ${title}`;
        header.slot = 'header';

        popover.append(header);
        popover.append(content);

        const interactiveMarker = new Marker3DInteractiveElement({
            // Include a title, used for accessibility text for use by screen readers.
            title,
            position,
            gmpPopoverTargetElement: popover,
        });

        interactiveMarker.append(pin);

        map3DElement.append(interactiveMarker);
        map3DElement.append(popover);
    });

    document.body.append(map3DElement);
}

void init();
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
html,
map {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

HTML

<html>
    <head>
        <title>Map</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-3d
            center="34.8405,-111.7909,1322.7"
            range="13279.5"
            tilt="67.44"
            heading="0.01"
            mode="satellite"
            gesture-handling="cooperative"></gmp-map-3d>
    </body>
</html>
index.html

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

1. Sử dụng phím tab để 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, hãy nhấn phím Enter để "nhấp". Nếu một đ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 lại phím tab để tiếp tục di chuyển qua các nút điều khiển còn lại của bản đồ.

Cách tăng cường 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 Marker3DInteractiveElement.title.
• Thêm nội dung vào vị trí header của PopoverElement.
• Tăng tỷ lệ điểm đánh dấu bằng cách sử dụng thuộc tính PinElement.scale.