إتاحة العلامات

يمكنك تسهيل استخدام العلامات من خلال تفعيل معالجة أحداث النقر وإضافة نص وصفي لبرامج قراءة الشاشة وتعديل مقياس العلامة.

  • عندما يكون العلامة قابلاً للنقر، يمكنه الاستجابة لإدخال لوحة المفاتيح والماوس.
  • يمكن لقارئي الشاشة قراءة النص المحدّد في خيار العنوان، وسيتم عرضه عندما يضع المستخدم مؤشر الماوس فوق علامة التحديد.
  • يؤدي زيادة حجم العلامات إلى تقليل الدقة المطلوبة للتفاعل معها على جميع الأجهزة، خاصةً الأجهزة التي تعمل باللمس، وتحسين سهولة الاستخدام. تستوفي العلامات التلقائية معيار الحد الأدنى لحجم العلامات في إرشادات AA الخاصة بـ WCAG، ولكن على المطوّرين الذين يريدون الامتثال لمعيار حجم العلامات المستهدف في إرشادات AAA الخاصة بـ WCAG زيادة حجم العلامات.

اطّلِع على تخصيص العلامات الأساسية للتعرّف على كيفية تغيير مقياس العلامة وإضافة نص العنوان وغير ذلك.

يعرض المثال التالي خريطة تتضمّن خمس علامات قابلة للنقر والتركيز، والتي تتضمن نص العنوان، وتم ضبطها على مقياس 1.5 مرة:

JavaScript

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

تجربة عيّنة

للتنقّل بين العلامات باستخدام لوحة المفاتيح:

  1. استخدِم مفتاح التبويب (Tab) للتركيز على العلامة الأولى. إذا كانت هناك علامات متعدّدة على الخريطة نفسها، استخدِم مفاتيح الأسهم للتنقّل بين العلامات.
  2. إذا كان العلامة قابلة للنقر، اضغط على مفتاح Enter "للنقر". إذا كانت العلامة تحتوي على نافذة معلومات، يمكنك فتحها بالنقر عليها أو بالضغط على مفتاح Enter أو مفتاح المسافة. عند إغلاق نافذة المعلومات، سيعود التركيز إلى العلامة المرتبط بها.
  3. اضغط على مفتاح التبويب (Tab) مرة أخرى لمواصلة التنقّل في بقية عناصر التحكّم في الخريطة.

لتحسين إمكانية الاستخدام:

  • اضبط نصًا وصفيًا لمؤشر باستخدام الخيار Marker3DInteractiveElement.title.
  • أضِف محتوى إلى خانة header في PopoverElement.
  • يمكنك زيادة مقياس العلامة باستخدام السمة PinElement.scale.