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, oltre all'altitudine a cui vengono visualizzati. L'esempio seguente mostra un indicatore di base:

Le mappe 3D in Maps JavaScript forniscono due classi di indicatori distinte, 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 di base e così via) Bassa (meno personalizzabile)
Prestazioni Prestazioni di interazione inferiori (FPS diminuisce con un numero elevato di indicatori) Prestazioni di interazione superiori (ottimizzate per il rendering di set di dati di grandi dimensioni)
Capacità consigliata Prestazioni di interazione affidabili 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

Fai in modo che un indicatore risponda agli eventi di clic e tastiera aggiungendo un listener di eventi click.

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

Impostare il comportamento di collisione 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',
});

Prestazioni 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