Indicatori

Utilizza gli indicatori per attirare l'attenzione di un utente su una posizione 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:

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

Capacità MarkerElement Marker3DElement
Personalizzazione Elevato (supporta elementi HTML personalizzati, API di animazione di base e così via) Bassa (meno personalizzabile)
Prestazioni Prestazioni di interazione inferiori (calo di FPS con un numero elevato di indicatori) Prestazioni di interazione più elevate (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

Personalizza 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

Imposta l'altitudine del marcatore

Puoi impostare l'altitudine del segnaposto estrudendolo e impostando l'altitudine.

Indicatore estruso

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

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

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

Imposta 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 consigliato l'utilizzo della classe Marker3dElement per garantire prestazioni ottimali.

Passaggio successivo