جعل العلامات قابلة للنقر والوصول إليها

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

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

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

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

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

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

جعل العلامة قابلة للنقر

يوضّح لك هذا القسم كيفية جعل العلامات تستجيب لأحداث النقر. لجعل العلامة قابلة للنقر:

• اضبط السمة gmpClickable على true.

TypeScript

const pin = new PinElement({
    glyphText: `${i + 1}`,
    scale: 1.5,
});
const marker = new AdvancedMarkerElement({
    position,
    title: `${i + 1}. ${title}`,
    gmpClickable: true,
});
marker.append(pin);
mapElement.append(marker);
index.ts

ملاحظة: يُرجى قراءة دليل استخدام TypeScript و"خرائط Google".

JavaScript

const pin = new PinElement({
    glyphText: `${i + 1}`,
    scale: 1.5,
});
const marker = new AdvancedMarkerElement({
    position,
    title: `${i + 1}. ${title}`,
    gmpClickable: true,
});
marker.append(pin);
mapElement.append(marker);
index.js

• أضِف متتبِّع الأحداث الناتجة عن النقر للاستجابة لبيانات أدخلها المستخدم.

TypeScript

// Add a click listener for each marker, and set up the info window.
marker.addEventListener('gmp-click', () => {
    infoWindow.close();
    infoWindow.setContent(marker.title);
    infoWindow.open(marker.map, marker);
});
index.ts

ملاحظة: يُرجى قراءة دليل استخدام TypeScript و"خرائط Google".

JavaScript

// Add a click listener for each marker, and set up the info window.
marker.addEventListener('gmp-click', () => {
    infoWindow.close();
    infoWindow.setContent(marker.title);
    infoWindow.open(marker.map, marker);
});
index.js

• لجعل العلامة غير قابلة للنقر مرة أخرى، استخدِم الدالة removeListener لإزالة متتبِّع الأحداث الناتج عن النقر:

// Remove the listener.
google.maps.event.removeListener(clickListener);

لتحسين إمكانية الوصول بشكل أكبر:

• اضبط نصًا وصفيًا للعلامة باستخدام الخيار AdvancedMarkerElement.title.
• زِد مقياس العلامة باستخدام السمة scale في PinElement.

نموذج التعليمات البرمجية الكامل

الاطّلاع على التعليمات البرمجية المصدر الكاملة للمثال

TypeScript

const mapElement = document.querySelector('gmp-map')!;

async function init() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement, PinElement }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('marker'),
        ]);

    // 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',
        },
    ];

    // Create an info window to share between markers.
    const infoWindow = new InfoWindow();

    // Create the markers.
    tourStops.forEach(({ position, title }, i) => {
        const pin = new PinElement({
            glyphText: `${i + 1}`,
            scale: 1.5,
        });
        const marker = new AdvancedMarkerElement({
            position,
            title: `${i + 1}. ${title}`,
            gmpClickable: true,
        });
        marker.append(pin);
        mapElement.append(marker);
        // Add a click listener for each marker, and set up the info window.
        marker.addEventListener('gmp-click', () => {
            infoWindow.close();
            infoWindow.setContent(marker.title);
            infoWindow.open(marker.map, marker);
        });
    });
}

void init();
index.ts

ملاحظة: يُرجى قراءة دليل استخدام TypeScript و"خرائط Google".

JavaScript

const mapElement = document.querySelector('gmp-map');

async function init() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement, PinElement }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('marker'),
        ]);

    // 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',
        },
    ];

    // Create an info window to share between markers.
    const infoWindow = new InfoWindow();

    // Create the markers.
    tourStops.forEach(({ position, title }, i) => {
        const pin = new PinElement({
            glyphText: `${i + 1}`,
            scale: 1.5,
        });
        const marker = new AdvancedMarkerElement({
            position,
            title: `${i + 1}. ${title}`,
            gmpClickable: true,
        });
        marker.append(pin);
        mapElement.append(marker);
        // Add a click listener for each marker, and set up the info window.
        marker.addEventListener('gmp-click', () => {
            infoWindow.close();
            infoWindow.setContent(marker.title);
            infoWindow.open(marker.map, marker);
        });
    });
}

void init();
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

HTML

<html>
    <head>
        <title>Advanced Marker Accessibility</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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
            });
        </script>
    </head>
    <body>
        <gmp-map
            zoom="12"
            center="34.84555,-111.8035"
            map-id="4504f8b37365c3d0"></gmp-map>
    </body>
</html>
index.html

تجربة نموذج

JSFiddle.net