Indicatori

Utilizza i pennarelli per attirare l'attenzione di un utente su una posizione su una mappa. Questa guida mostra come utilizzare e personalizzare i segnaposto nelle mappe 3D. Puoi controllare la forma, le dimensioni e il colore dei marcatori, oltre all'altitudine a cui vengono visualizzati. L'esempio seguente mostra un indicatore di base:

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

Capacità MarkerElement Marker3DElement
Personalizzazione Alto (supporta elementi HTML personalizzati, API di animazione principali e così via) Basso (meno personalizzabile)
Rendimento Prestazioni di interazione inferiori (FPS scende 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 marcatori

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 indicatore predefinita con una risorsa SVG personalizzata.

Indicatori con grafica

Imposta l'altitudine del marker

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

Indicatore estruso

Fare in modo che i marcatori 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,
});

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 dell'indicatore

I marcatori HTML personalizzati (MarkerElement) offrono prestazioni inferiori rispetto ai marcatori 3D standard (Marker3DElement). Per le applicazioni con più di 1000 marcatori, è vivamente consigliato l'utilizzo della classeMarker3dElement per garantire prestazioni ottimali.

Passaggio successivo