Indicatori

Utilizza gli indicatori per attirare l'attenzione di un utente su una località su una mappa. Questa guida mostra come utilizzare e personalizzare gli indicatori nelle mappe 3D. Puoi controllare la forma, le dimensioni e il colore degli indicatori, nonché l'altitudine a cui vengono visualizzati. L'esempio seguente mostra un indicatore di base:

Maps JavaScript fornisce due classi di indicatori distinte per le mappe 3D, ognuna ottimizzata per usi specifici. La tabella seguente mostra le differenze e i compromessi tra le due classi disponibili:

Capacità MarkerElement Marker3DElement
Personalizzazione Elevata (supporta elementi HTML personalizzati, API di animazione principali e così via) Bassa (meno personalizzabile)
Rendimento Rendimento di interazione inferiore (FPS diminuisce con un numero elevato di indicatori) Rendimento di interazione superiore (ottimizzato per il rendering di set di dati di grandi dimensioni)
Capacità consigliata Rendimento di interazione affidabile fino a circa 1000 indicatori Consigliato per la gestione di oltre 1000 indicatori

Personalizzare il colore, la scala e l'immagine dell'icona

Personalizza lo sfondo, il glifo, il colore del bordo e le dimensioni dell'indicatore predefinito.

Indicatori personalizzati

Sostituisci l'icona dell'indicatore predefinita con una risorsa SVG personalizzata.

Indicatori con elementi grafici

Impostare l'altitudine dell'indicatore

Puoi impostare l'altitudine dell'indicatore estrudendolo e impostando l'altitudine.

Indicatore estruso

Fare in modo che gli indicatori rispondano agli eventi di clic e tastiera

Per fare in modo che un indicatore risponda agli eventi di clic e tastiera, aggiungi un listener di eventi click.

const interactiveMarker = new Marker3DInteractiveElement({
    position,
    gmpPopoverTargetElement: popover,
});

Impostare il comportamento della sovrapposizione degli indicatori

Specifica il comportamento di un indicatore quando entra in collisione con un altro indicatore o con un'etichetta della mappa.

const marker = new Marker3DElement({
    position: { lat, lng },
    // Try setting a different collision behavior here.
    collisionBehavior: 'REQUIRED',
});

Rendimento degli indicatori

Gli indicatori HTML personalizzati (MarkerElement) offrono prestazioni inferiori rispetto agli indicatori 3D standard (Marker3DElement). Per le applicazioni con più di 1000 indicatori, è vivamente consigliata la classe Marker3dElement per garantire prestazioni ottimali.

Passaggio successivo