نشانگرها را قابل کلیک و در دسترس قرار دهید

می‌توانید با فعال کردن مدیریت رویداد کلیک، افزودن متن توصیفی برای صفحه‌خوان‌ها و تنظیم مقیاس نشانگر، نشانگرها را در دسترس‌تر کنید.

• وقتی یک نشانگر قابل کلیک (یا کشیدن ) باشد، می تواند به ورودی صفحه کلید و ماوس پاسخ دهد.
• متن مشخص شده در گزینه title توسط صفحه خوان ها قابل خواندن است و زمانی نمایش داده می شود که کاربر نشانگر ماوس را روی نشانگر نگه دارد.
• افزایش اندازه نشانگرها دقت مورد نیاز برای تعامل با آن را در همه دستگاه‌ها - به ویژه دستگاه‌های صفحه لمسی - کاهش می‌دهد و دسترسی را بهبود می‌بخشد. نشانگرهای پیش‌فرض استاندارد حداقل اندازه WCAG AA را برآورده می‌کنند، اما برای توسعه‌دهندگانی که قصد دارند از استاندارد اندازه هدف WCAG AAA پیروی کنند، اندازه نشانگر باید افزایش یابد.

برای یادگیری نحوه تغییر مقیاس نشانگر، افزودن متن عنوان و موارد دیگر، به سفارشی‌سازی اولیه نشانگر مراجعه کنید.

مثال زیر نقشه ای را با پنج نشانگر قابل کلیک و قابل تمرکز نشان می دهد که شامل متن عنوان است و در مقیاس 1.5x تنظیم شده است:

برای پیمایش نشانگرها با استفاده از صفحه کلید:

1. از کلید تب برای تمرکز روی اولین نشانگر استفاده کنید. اگر چندین نشانگر روی یک نقشه وجود دارد، از کلیدهای جهت دار برای چرخش در میان نشانگرها استفاده کنید.
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 Maps را بخوانید.

جاوا اسکریپت

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 Maps را بخوانید.

جاوا اسکریپت

// 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 Maps را بخوانید.

جاوا اسکریپت

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

توجه: جاوا اسکریپت از قطعه 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>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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

Sample را امتحان کنید

JSFiddle.net Google Cloud Shell