عند تفعيل إمكانية السحب، يمكن للمستخدمين سحب محدّدات المواقع على الخريطة باستخدام الماوس أو مفاتيح الأسهم. لجعل العلامة قابلة للسحب، اضبط السمة AdvancedMarkerElement.gmpDraggable
على true
.
يعرض المثال التالي على الخريطة علامة قابلة للسحب تعرِض موضعها المحدّث عند انتهاء السحب (يتم تنشيط حدث dragend
):
لسحب علامة باستخدام لوحة المفاتيح:
- اضغط على مفتاح التبويب (Tab) إلى أن يتم التركيز على العلامات.
- استخدِم مفتاح السهم للانتقال إلى العلامة المطلوبة.
- لتفعيل السحب، اضغط على Option + مفتاح المسافة أو Option + Enter (نظام التشغيل Mac) أو Alt + مفتاح المسافة أو Alt + Enter (نظام التشغيل Windows).
- استخدِم مفاتيح الأسهم لتحريك محدّد الموقع.
- لإفلات العلامة في موقعها الجديد، اضغط على مفتاح المسافة أو Enter. سيؤدي هذا أيضًا إلى إيقاف السحب.
- لإيقاف السحب وإعادة العلامة إلى موضعها السابق، اضغط على 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();
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();
ضبط نص وصفي
لضبط نص وصفي لعلامة يمكن قراءته بواسطة برامج قراءة الشاشة، استخدِم السمة AdvancedMarkerElement.title
كما هو موضّح هنا:
const markerView = new google.maps.marker.AdvancedMarkerElement({
map,
position: { lat: 37.4239163, lng: -122.0947209 },
title: "Some descriptive text.",
});
عندما يتم ضبط السمة title
، يصبح النص مرئيًا لبرامج قراءة الشاشة، وسيظهر عند تمرير الماوس فوق محدّد الموقع.