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

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

• عندما تكون العلامة قابلة للنقر (أو قابلة للسحب)، يمكنها الاستجابة لإدخال لوحة المفاتيح والماوس.
• يمكن لقارئات الشاشة قراءة النص المحدّد في الخيار 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

• أضِف متتبِّع أحداث gmp-click للاستجابة لإدخالات المستخدم.

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

• لجعل العلامة غير قابلة للنقر مرة أخرى:

  • استخدِم الدالة removeEventListener لإزالة متتبِّع الأحداث gmp-click:

  // Remove the listener.
  marker.removeEventListener('gmp-click', clickListener);
  

  • أو يمكنك بدلاً من ذلك ضبط سمة gmpClickable على false.

لتحسين أدوات تسهيل الاستخدام بشكل أكبر:

• يمكنك ضبط نص وصفي لعلامة باستخدام الخيار 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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map
            zoom="12"
            center="34.84555,-111.8035"
            map-id="4504f8b37365c3d0"></gmp-map>
    </body>
</html>
index.html