جعل العلامات قابلة للسحب

عند تفعيل إمكانية السحب، يمكن للمستخدمين سحب محدّدات المواقع على الخريطة باستخدام الماوس أو مفاتيح الأسهم. لجعل محدّد الموقع قابل للسحب، اضبط AdvancedMarkerElement.gmpDraggable. على true.

يوضح المثال التالي على الخريطة علامة قابلة للسحب تعرض الخريطة المعدَّلة الموضع عند انتهاء السحب (يتم تنشيط حدث dragend):

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

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

JavaScript

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، يكون النص مرئيًا لبرامج قراءة الشاشة. سيظهر عند تمرير الماوس فوق العلامة.