Rendere gli indicatori trascinabili

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

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

Per trascinare un indicatore con la tastiera:

  1. Premi il tasto Tab finché i marcatori non sono attivi.
  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. Usa i tasti freccia per spostare l'indicatore.
  5. Per posizionare l'indicatore nella nuova posizione, premi la barra spaziatrice o Invio. In questo modo verrà disattivato anche il trascinamento.
  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.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();

Impostare il testo descrittivo

Per impostare un testo descrittivo per 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 il marcatore.