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

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

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

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

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

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. استخدِم مفتاح التبويب للتركيز على العلامة الأولى، وإذا كانت هناك علامات متعددة على الخريطة نفسها، استخدِم مفاتيح الأسهم للتنقّل بين العلامات.
  2. إذا كان العلامة قابلة للنقر، اضغط على مفتاح Enter "للنقر". إذا كان هناك نافذة معلومات مرتبطة بعلامة، يمكنك فتحها من خلال النقر عليها أو الضغط على مفتاح Enter أو مفتاح المسافة. عند إغلاق نافذة المعلومات، سيعود التركيز إلى العلامة المرتبطة بها.
  3. اضغط على مفتاح التبويب مرة أخرى لمواصلة التنقّل بين بقية عناصر التحكّم في الخريطة.

لتحسين إمكانية الوصول إلى المحتوى، يُرجى اتّباع الخطوات التالية:

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