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

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

• لجعل محدّد الموقع قابلاً للنقر، اضبط السمة AdvancedMarkerElement.gmpClickable على true، وأضِف معالج أحداث.
• لجعل محدّد الموقع قابلاً للسحب، اضبط السمة AdvancedMarkerElement.gmpDraggable على true.
• لتعيين نص وصفي للعلامة، استخدم خيار AdvancedMarkerElement.title.

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

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

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

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

الاطّلاع على الرمز

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

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. اضغط على مفتاح التبويب (Tab) إلى أن يتم تحديد التركيز على العلامات.
2. استخدِم مفتاح السهم للانتقال إلى العلامة المطلوبة.
3. لتفعيل السحب، اضغط على Option + Space أو Option + Enter (Mac) أو Alt + Space أو Alt + Enter (Windows).
4. استخدِم مفاتيح الأسهم لتحريك محدِّد الموقع.
5. لإسقاط العلامة في موقعها الجديد، اضغط على مفتاح المسافة أو Enter. سيؤدي هذا أيضًا إلى إيقاف السحب.
6. لإيقاف السحب وإعادة العلامة إلى موضعها السابق، اضغط على Esc.

الاطّلاع على الرمز

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

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