Rendere gli indicatori trascinabili

Quando la funzionalità di trascinamento è attiva, gli utenti possono trascinare gli indicatori sulla mappa utilizzando il mouse o i tasti freccia. Per rendere trascinabile un indicatore, imposta la proprietà AdvancedMarkerElement.gmpDraggable su true.

La mappa di esempio seguente mostra un indicatore trascinabile che visualizza la sua posizione aggiornata al termine del trascinamento (viene attivato l'evento dragend):

Per trascinare un indicatore con la tastiera:

1. Premi il tasto Tab finché gli indicatori non sono selezionati.
2. Utilizza il tasto Freccia per spostarti sull'indicatore desiderato.
3. Per attivare il trascinamento, premi Opzione + Barra spaziatrice o Opzione + Invio (Mac), Alt + Barra spaziatrice o Alt + Invio (Windows).
4. Utilizza i tasti freccia per spostare l'indicatore.
5. Per rilasciare l'indicatore nella sua nuova posizione, premi la barra spaziatrice o Invio. In questo modo, il trascinamento verrà disattivato.
6. Per disattivare il trascinamento e riportare l'indicatore nella posizione precedente, premi Esc.

Visualizza il codice

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();
index.ts

Nota: leggi la guida sull'utilizzo di TypeScript e Google Maps.

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();
index.js

Imposta il testo descrittivo

Per impostare il testo descrittivo di un indicatore, che può essere letto dagli screen reader, utilizza l'attributo AdvancedMarkerElement.title, come mostrato di seguito:

    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 viene visualizzato quando il mouse passa sopra l'indicatore.