Indicatori

Utilizza i segnaposto 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. Il seguente esempio 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 di base e così via) Bassa (meno personalizzabile)
Prestazioni Prestazioni di interazione inferiori (calo degli 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

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

Indicatori con immagini

Impostare l'altitudine del marcatore

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 degli indicatori

I marcatori HTML personalizzati (MarkerElement) offrono prestazioni inferiori rispetto ai marcatori 3D standard (Marker3DElement). Per le applicazioni con più di 1000 marcatori, è vivamente consigliata la Marker3dElementclasse per garantire prestazioni ottimali.

Passaggio successivo