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

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

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

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

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

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

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

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

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

• اضبط السمة 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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
  </body>
</html>
index.html

تجربة "عيّنة"

JSFiddle.net Google Cloud Shell