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 dei marcatori utilizzando il costruttore pinConfiguration. Il costruttore pinConfiguration fornisce metodi per modificare i colori di sfondo e del 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 i marcatori nei seguenti modi:

Scala il marcatore

Per scalare un indicatore, utilizza l'opzione scale:

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

Modificare il colore dello 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 del marcatore viene scalato con il marcatore:

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

Utilizzare un'immagine come marcatore

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 i marcatori

Utilizza Marker.remove() per rimuovere i segnaposto dalla mappa:

marker.remove();