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

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

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

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

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

JavaScript

async function init() {
    // Import the needed libraries.
    const [{ Marker3DInteractiveElement, PopoverElement }, { PinElement }] =
        await Promise.all([
            google.maps.importLibrary('maps3d'),
            google.maps.importLibrary('marker'),
        ]);

    const map3DElement = document.querySelector('gmp-map-3d');

    // 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: String(i + 1),
            scale: 1.5,
            glyphColor: '#FFFFFF',
        });
        const popover = new PopoverElement();

        const content = `${String(i + 1)}. ${title}`;
        const header = document.createElement('span');
        // Include the label for screen readers.
        header.ariaLabel = `This is marker ${String(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);

        map3DElement.append(interactiveMarker);
        map3DElement.append(popover);
    });

    document.body.append(map3DElement);
}

void init();
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>
        <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-3d
            center="34.8405,-111.7909,1322.7"
            range="13279.5"
            tilt="67.44"
            heading="0.01"
            mode="satellite"
            gesture-handling="cooperative"></gmp-map-3d>
    </body>
</html>
index.html

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

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

لتحسين أدوات تسهيل الاستخدام:

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