نشانگرها را کلیک‌کردنی و دست‌یافتنی کنید

با فعال کردن مدیریت رویداد کلیک، افزودن نوشتار توصیفی برای صفحه‌خوان‌ها، و تنظیم مقیاس نشانگر می‌توانید دسترسی به نشانگرها را آسان‌تر کنید.

• وقتی نشانگر قابل‌کلیک (یا کشیدنی) باشد، می‌تواند به ورودی صفحه‌کلید و موشواره پاسخ دهد.
• نوشتار مشخص‌شده در گزینه title توسط صفحه‌خوان‌ها قابل خواندن است و وقتی کاربر نشانگر موشواره را روی نشانگر نگه می‌دارد نمایش داده می‌شود.
• افزایش اندازه نشانگرها دقت لازم برای تعامل با آن را در همه دستگاه‌ها، به‌ویژه دستگاه‌های دارای صفحه لمسی، کاهش می‌دهد و دسترسی‌پذیری را بهبود می‌بخشد. نشانگرهای پیش‌فرض با استاندارد حداقل اندازه WCAG AA مطابقت دارند اما برای توسعه‌دهندگانی که هدفشان مطابقت با استاندارد اندازه هدف WCAG AAA است، اندازه نشانگر باید افزایش یابد.

برای آشنایی با نحوه تغییر مقیاس نشانگر، افزودن نوشتار عنوان، و غیره، سفارشی‌سازی نشانگر پایه را ببینید.

مثال زیر نقشه‌ای را نشان می‌دهد که پنج نشانگر کلیک‌کردنی و قابل‌تمرکز دارد که شامل نوشتار عنوان است و مقیاس آن‌ها روی ۱٫۵ برابر تنظیم شده است:

برای پیمایش نشانگرها بااستفاده از صفحه‌کلید:

1. برای تمرکز روی اولین نشانگر از کلید جهش استفاده کنید؛ اگر چندین نشانگر در یک نقشه وجود دارد، از کلیدهای جهت‌نما برای پیمایش بین نشانگرها استفاده کنید.
2. اگر نشانگر کلیک‌کردنی است، کلید Enter را فشار دهید تا «کلیک» کنید. اگر نشانگری پنجره اطلاعات داشته باشد، می‌توانید آن را با کلیک کردن یا با فشار دادن کلید Enter یا کلید فاصله باز کنید. وقتی پنجره اطلاعات بسته می‌شود، تمرکز به نشانگر مرتبط برمی‌گردد.
3. برای ادامه حرکت در بقیه کنترل‌های نقشه، دوباره کلید جهش را فشار دهید.

کلیک‌کردنی کردن نشانگر

این بخش نشان می‌دهد که چگونه نشانگرها را به رویدادهای کلیک پاسخگو کنید. برای کلیک‌کردنی کردن نشانگر:

• خصوصیت 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

• برای پاسخ دادن به درونداد کاربر، شنونده رویداد 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

• برای اینکه نشانگر دوباره غیرقابل‌کلیک شود:

  • برای برداشتن شنونده رویداد gmp-click، با removeEventListener تماس بگیرید:

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