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

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

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

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

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

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

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

جعل محدّد الموقع قابلاً للنقر

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

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

TypeScript

const marker = new AdvancedMarkerElement({
    position,
    map,
    title: `${i + 1}. ${title}`,
    content: pin.element,
    gmpClickable: true,
});
index.ts

ملاحظة: يمكنك الاطّلاع على الدليل حول استخدام TypeScript و"خرائط Google".

JavaScript

const marker = new AdvancedMarkerElement({
    position,
    map,
    title: `${i + 1}. ${title}`,
    content: pin.element,
    gmpClickable: true,
});
index.js

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

TypeScript

// Add a click listener for each marker, and set up the info window.
marker.addListener('click', ({ domEvent, latLng }) => {
    const { target } = domEvent;
    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.addListener('click', ({ domEvent, latLng }) => {
    const { target } = domEvent;
    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

async function initMap() {
    // Request needed libraries.
    const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

    const map = new Map(document.getElementById("map") as HTMLElement, {
        zoom: 12,
        center: { lat: 34.84555, lng: -111.8035 },
        mapId: '4504f8b37365c3d0',
    });

    // 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({
            glyph: `${i + 1}`,
            scale: 1.5,
        });
        const marker = new AdvancedMarkerElement({
            position,
            map,
            title: `${i + 1}. ${title}`,
            content: pin.element,
            gmpClickable: true,
        });
        // Add a click listener for each marker, and set up the info window.
        marker.addListener('click', ({ domEvent, latLng }) => {
            const { target } = domEvent;
            infoWindow.close();
            infoWindow.setContent(marker.title);
            infoWindow.open(marker.map, marker);
        });
    });
}

initMap();
index.ts

ملاحظة: يمكنك الاطّلاع على الدليل حول استخدام TypeScript و"خرائط Google".

JavaScript

async function initMap() {
    // Request needed libraries.
    const { Map, InfoWindow } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
    const map = new Map(document.getElementById("map"), {
        zoom: 12,
        center: { lat: 34.84555, lng: -111.8035 },
        mapId: '4504f8b37365c3d0',
    });
    // 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({
            glyph: `${i + 1}`,
            scale: 1.5,
        });
        const marker = new AdvancedMarkerElement({
            position,
            map,
            title: `${i + 1}. ${title}`,
            content: pin.element,
            gmpClickable: true,
        });
        // Add a click listener for each marker, and set up the info window.
        marker.addListener('click', ({ domEvent, latLng }) => {
            const { target } = domEvent;
            infoWindow.close();
            infoWindow.setContent(marker.title);
            infoWindow.open(marker.map, marker);
        });
    });
}
initMap();
index.js

ملاحظة: يتم تجميع JavaScript من مقتطف TypeScript.

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>
  </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

تجربة عيّنة

JSFiddle.net