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

هنگامی که یک نشانگر قابل کلیک یا کشیدن است، می تواند به ورودی صفحه کلید و ماوس پاسخ دهد. می‌توانید از ماوس یا صفحه‌کلید برای جابه‌جایی بین نشانگرها و برای جابجایی نشانگر در صورت کشیدن آن استفاده کنید. متن مشخص شده در گزینه title توسط صفحه خوان ها قابل خواندن است.

• برای اینکه یک نشانگر قابل کلیک باشد، ویژگی AdvancedMarkerElement.gmpClickable را روی true تنظیم کنید و یک کنترل کننده رویداد کلیک اضافه کنید.
• برای اینکه یک نشانگر قابل کشیدن باشد، ویژگی AdvancedMarkerElement.gmpDraggable را روی true تنظیم کنید.
• برای تنظیم متن توصیفی برای یک نشانگر، از گزینه AdvancedMarkerElement.title استفاده کنید.

یک نشانگر قابل کلیک بسازید

مثال زیر نقشه ای را با پنج نشانگر قابل کلیک و قابل فوکوس نشان می دهد:

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

1. از کلید تب برای تمرکز روی اولین نشانگر استفاده کنید. اگر چندین نشانگر روی یک نقشه وجود دارد، از کلیدهای جهت دار برای چرخش در میان نشانگرها استفاده کنید.
2. اگر نشانگر قابل کلیک است، کلید enter را فشار دهید تا "کلیک کنید". اگر نشانگر دارای پنجره اطلاعات باشد، می‌توانید با کلیک کردن، یا با فشار دادن کلید enter یا نوار فاصله، آن را باز کنید. وقتی پنجره اطلاعات بسته می شود، فوکوس به نشانگر مرتبط باز می گردد.
3. دوباره tab را فشار دهید تا به حرکت در بقیه کنترل‌های نقشه ادامه دهید.

کد را ببینید

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}`,
        });

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

        // 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}`,
    });
    const marker = new AdvancedMarkerElement({
      position,
      map,
      title: `${i + 1}. ${title}`,
      content: pin.element,
    });

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

برای غیرقابل کلیک کردن دوباره نشانگر، شنونده رویداد کلیک را حذف کنید:

// Adding the listener.
const clickListener = markerView.addListener('click', () => {...});

// Removing the listener.
google.maps.event.removeListener(clickListener);

یک نشانگر قابل کشیدن ایجاد کنید

وقتی قابلیت کشیدن فعال است، کاربران می توانند با استفاده از ماوس یا کلیدهای جهت دار، نشانگرها را روی نقشه بکشند. برای اینکه یک نشانگر قابل کشیدن باشد، ویژگی AdvancedMarkerElement.gmpDraggable را روی true تنظیم کنید.

نقشه مثال زیر یک نشانگر قابل کشیدن را نشان می دهد که موقعیت به روز شده خود را پس از پایان کشیدن نشان می دهد (رویداد dragend فعال می شود):

برای کشیدن نشانگر با صفحه کلید:

1. کلید تب را فشار دهید تا نشانگرها فوکوس شوند.
2. برای رفتن به نشانگر مورد نظر از کلید جهت دار استفاده کنید.
3. برای فعال کردن کشیدن، Option + Space یا Option + Enter (Mac)، ALT + Space یا Alt + Enter (ویندوز) را فشار دهید.
4. برای جابجایی نشانگر از کلیدهای جهت دار استفاده کنید.
5. برای رها کردن نشانگر در مکان جدید، Space یا Enter را فشار دهید. این کار کشیدن را نیز خاموش می کند.
6. برای خاموش کردن کشیدن و بازگرداندن نشانگر به موقعیت قبلی، Esc را فشار دهید.

کد را ببینید

TypeScript

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

    const map = new Map(document.getElementById('map') as HTMLElement, {
        center: {lat: 37.39094933041195, lng: -122.02503913145092},
        zoom: 14,
        mapId: '4504f8b37365c3d0',
    });

    const infoWindow = new InfoWindow();

    const draggableMarker = new AdvancedMarkerElement({
        map,
        position: {lat: 37.39094933041195, lng: -122.02503913145092},
        gmpDraggable: true,
        title: "This marker is draggable.",
    });
    draggableMarker.addListener('dragend', (event) => {
        const position = draggableMarker.position as google.maps.LatLng;
        infoWindow.close();
        infoWindow.setContent(`Pin dropped at: ${position.lat}, ${position.lng}`);
        infoWindow.open(draggableMarker.map, draggableMarker);
    });

}

initMap();
index.ts

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

جاوا اسکریپت

async function initMap() {
  // Request needed libraries.
  const { Map, InfoWindow } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const map = new Map(document.getElementById("map"), {
    center: { lat: 37.39094933041195, lng: -122.02503913145092 },
    zoom: 14,
    mapId: "4504f8b37365c3d0",
  });
  const infoWindow = new InfoWindow();
  const draggableMarker = new AdvancedMarkerElement({
    map,
    position: { lat: 37.39094933041195, lng: -122.02503913145092 },
    gmpDraggable: true,
    title: "This marker is draggable.",
  });

  draggableMarker.addListener("dragend", (event) => {
    const position = draggableMarker.position;

    infoWindow.close();
    infoWindow.setContent(`Pin dropped at: ${position.lat}, ${position.lng}`);
    infoWindow.open(draggableMarker.map, draggableMarker);
  });
}

initMap();
index.js

تنظیم متن توصیفی

برای تنظیم متن توصیفی برای یک نشانگر، که می تواند توسط صفحه خوان ها خوانده شود، از ویژگی AdvancedMarkerElement.title استفاده کنید، همانطور که در اینجا نشان داده شده است:

    const markerView = new google.maps.marker.AdvancedMarkerElement({
        map,
        position: { lat: 37.4239163, lng: -122.0947209 },
        title: "Some descriptive text.",
    });

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

مقیاس نشانگر را تنظیم کنید

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

در اینجا یک مثال از ایجاد یک نشانگر بزرگتر با استفاده از یک PinElement کوچک شده است:

    const pinScaled = new PinElement({
        scale: 2,
    });
    const markerScaled = new AdvancedMarkerElement({
        map,
        position: { lat: 37.419, lng: -122.02 },
        content: pinScaled.element,
    });