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

عند تفعيل ميزة السحب، يمكن للمستخدمين سحب العلامات على الخريطة باستخدام الماوس أو مفاتيح الأسهم. لجعل العلامة قابلة للسحب، اضبط السمة 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

ملاحظة: اطّلِع على الدليل حول استخدام TypeScript و"خرائط Google".

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