כאשר אפשרות הגרירה מופעלת, המשתמשים יכולים לגרור סמנים במפה באמצעות העכבר
או על מקשי החיצים. כדי להפוך סמן שניתן לגרירה, צריך להגדיר את הפרמטר 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
מוגדר, הטקסט גלוי לקוראי מסך, וגם
תופיע כאשר העכבר יעבור מעל הסמן.