Personalizzazione di base degli indicatori

Seleziona la piattaforma: Android iOS JavaScript

Immagine 3D di New York con l'Empire State Building e tre indicatori digitali personalizzati che fluttuano sopra, tra cui un gorilla in stile cartone animato con l'etichetta

Puoi personalizzare l'aspetto degli indicatori utilizzando il costruttore pinConfiguration. Il costruttore pinConfiguration fornisce metodi per modificare i colori di sfondo e bordo, il testo e il colore del glifo, l'altitudine, l'immagine da utilizzare e altre opzioni per un'ulteriore personalizzazione.

Il seguente esempio di codice mostra come creare un nuovo indicatore e applicargli uno stile utilizzando alcune delle opzioni di personalizzazione disponibili:

map.addMarker(
 markerOptions {
   position = sanFrancisco
   style = pinConfiguration {
     backgroundColor = Color.GREEN
     borderColor = Color.GREEN
     glyph = Glyph.fromColor(Color.RED)
   }
 }
)

Questa pagina mostra come personalizzare gli indicatori nei seguenti modi:

Scala l'indicatore

Per scalare un indicatore, utilizza l'opzione scale:

map.addMarker(
 markerOptions {
   position = sanFrancisco
   style = pinConfiguration {
     scale = 3.14
   }
 }
)

Cambia il colore dello sfondo

Utilizza l'opzione PinElement.background per modificare il colore di sfondo di un indicatore durante la creazione:

map.addMarker(
 markerOptions {
   position = sanFrancisco
   style = pinConfiguration {
     backgroundColor = Color.GREEN
   }
 }
)

Modifica il colore del bordo

Utilizza l'opzione markerOptions.borderColor per modificare il colore del bordo di un indicatore durante la creazione:

map.addMarker(
 markerOptions {
   position = sanFrancisco
   style = pinConfiguration {
     borderColor = Color.GREEN
   }
 }
)

Aggiungi testo a un glifo

Utilizza il metodo markerOptions.glyph per sostituire il glifo predefinito con un carattere di testo. Il glifo di testo dell'indicatore viene ridimensionato con l'indicatore:

map.addMarker(
 markerOptions {
   position = sanFrancisco
   style = pinConfiguration {
     glyph = Glyph.fromText("G")
   }
 }
)

Utilizza un'immagine come indicatore

Map.addMarker(markerOptions {
  position = latLngAltitude {
      latitude = 40.7484
      longitude = -73.9857
      altitude = 100.0
  }
  zIndex = 1
  label = "Empire State Building"
  isExtruded = true
  isDrawnWhenOccluded = true
  altitudeMode = AltitudeMode.RELATIVE_TO_MESH
  setStyle(ImageView(R.drawable.ook))
})

Rimuovi indicatori

Utilizza Marker.remove() per rimuovere gli indicatori dalla mappa:

marker.remove();