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

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

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

لسحب علامة باستخدام لوحة المفاتيح، اتّبِع الخطوات التالية:

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

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

TypeScript

const mapElement = document.querySelector('gmp-map')!;

async function init() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
    ]);

    const infoWindow = new InfoWindow();

    const draggableMarker = new AdvancedMarkerElement({
        position: { lat: 37.39094933041195, lng: -122.02503913145092 },
        gmpDraggable: true,
        title: 'This marker is draggable.',
    });
    mapElement.append(draggableMarker);

    draggableMarker.addListener('dragend', () => {
        const position = draggableMarker.position!;
        infoWindow.close();
        infoWindow.setContent(`Pin dropped at: ${JSON.stringify(position)}`);
        infoWindow.open(draggableMarker.map, draggableMarker);
    });
}

void init();

JavaScript

const mapElement = document.querySelector('gmp-map');

async function init() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
    ]);

    const infoWindow = new InfoWindow();

    const draggableMarker = new AdvancedMarkerElement({
        position: { lat: 37.39094933041195, lng: -122.02503913145092 },
        gmpDraggable: true,
        title: 'This marker is draggable.',
    });
    mapElement.append(draggableMarker);

    draggableMarker.addListener('dragend', () => {
        const position = draggableMarker.position;
        infoWindow.close();
        infoWindow.setContent(`Pin dropped at: ${JSON.stringify(position)}`);
        infoWindow.open(draggableMarker.map, draggableMarker);
    });
}

void init();

ضبط نص وصفي

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

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

عند ضبط السمة title، يصبح النص مرئيًا لبرامج قراءة الشاشة وسيظهر عند تمرير مؤشر الماوس فوق العلامة.