نشانگرها را در دسترس قرار دهید

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

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

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

مثال زیر نقشه ای را با پنج نشانگر قابل کلیک و قابل تمرکز نشان می دهد که شامل متن عنوان است و در مقیاس 1.5x تنظیم شده است:

جاوا اسکریپت 

async function initMap() {
    const { Map3DElement, Marker3DInteractiveElement, PopoverElement } = await google.maps.importLibrary("maps3d");
    const { PinElement } = await google.maps.importLibrary("marker");
    const map = new Map3DElement({
        center: { lat: 34.8405, lng: -111.7909, altitude: 1322.70 }, range: 13279.50, tilt: 67.44, heading: 0.01,
        mode: 'SATELLITE'
    });
    // 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({
            glyph: `${i + 1}`,
            scale: 1.5,
            glyphColor: "#FFFFFF"
        });
        const popover = new PopoverElement();
        const content = `${i + 1}. ${title}`;
        const header = document.createElement('span');
        // Include the label for screen readers.
        header.ariaLabel = `This is marker ${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);
        map.append(interactiveMarker);
        map.append(popover);
    });
    document.body.append(map);
}
initMap();
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>
  </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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta",});</script>
  </body>
</html>
index.html

Sample را امتحان کنید

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

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

برای افزایش دسترسی:

  • با استفاده از گزینه Marker3DInteractiveElement.title متن توصیفی را برای یک نشانگر تنظیم کنید.
  • محتوا را به شکاف header PopoverElement اضافه کنید.
  • با استفاده از ویژگی PinElement.scale مقیاس نشانگر را افزایش دهید.