Quando la funzionalità di trascinamento è attiva, gli utenti possono trascinare gli indicatori sulla mappa utilizzando il mouse
o i tasti freccia. Per rendere un indicatore trascinabile, imposta AdvancedMarkerElement.gmpDraggable
a true
.
La mappa di esempio seguente mostra un indicatore trascinabile che mostra la sua posizione aggiornata al termine del trascinamento (viene attivato l'evento dragend
):
Per trascinare un indicatore con la tastiera:
- Premi il tasto Tab finché gli indicatori non vengono attivati.
- Usa il tasto Freccia per spostarti sull'indicatore desiderato.
- Per attivare il trascinamento, premi Opzione + barra spaziatrice o Opzione + Invio (Mac), Alt + barra spaziatrice o Alt + Invio (Windows).
- Utilizza i tasti freccia per spostare l'indicatore.
- Per inserire l'indicatore nella nuova posizione, premi la barra spaziatrice o Invio. Questo disattiverà anche il trascinamento.
- Per disattivare il trascinamento e riportare l'indicatore alla posizione precedente, premi ESC.
Visualizza il codice
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();
Imposta testo descrittivo
Per impostare un testo descrittivo per un indicatore che possa essere letto dagli screen reader, utilizza
l'attributo AdvancedMarkerElement.title
, come mostrato qui:
const markerView = new google.maps.marker.AdvancedMarkerElement({
map,
position: { lat: 37.4239163, lng: -122.0947209 },
title: "Some descriptive text.",
});
Quando l'attributo title
è impostato, il testo è visibile agli screen reader e
appare quando il mouse passa il mouse sopra l'indicatore.