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 una personalizzazione aggiuntiva.

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:

Ridimensionare l'indicatore

Per ridimensionare un indicatore, utilizza l'opzione scale:

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

Modificare il colore di sfondo

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

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

Modificare il colore del bordo

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

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

Aggiungere 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")
   }
 }
)

Utilizzare 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))
})

Rimuovere gli indicatori

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

marker.remove();