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

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

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

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

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

جاوا اسکریپت 

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',
        gestureHandling: "COOPERATIVE"
    });
    // 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: `${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

سی اس اس 

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

نمونه را امتحان کنید

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

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

برای افزایش دسترسی‌پذیری:

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