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

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

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

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

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

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

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

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