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

عند تفعيل ميزة السحب، يمكن للمستخدمين سحب محدّدات المواقع على الخريطة باستخدام الماوس أو مفاتيح الأسهم. لجعل العلامة قابلة للسحب، اضبط السمة 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.addEventListener('gmp-dragend', () => {
        const position = draggableMarker.position as google.maps.LatLngAltitude;
        infoWindow.close();
        infoWindow.setContent(
            `Pin dropped at: ${String(position.lat)}, ${String(position.lng)}`
        );
        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.addEventListener('gmp-dragend', () => {
        const position = draggableMarker.position;
        infoWindow.close();
        infoWindow.setContent(
            `Pin dropped at: ${String(position.lat)}, ${String(position.lng)}`
        );
        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، يكون النص مرئيًا لبرامج قراءة الشاشة، وسيظهر عند تمرير مؤشر الماوس فوق العلامة.