Personalizzazione di base degli indicatori

Seleziona la piattaforma: Android iOS JavaScript

Mappa di San Francisco con indicatori con stili personalizzati

Puoi personalizzare l'aspetto dei marcatori configurando l'oggetto PinStyle. Il tipo PinStyle offre opzioni 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(mode: .hybrid) {
  Marker(
      position: .init(latitude: 51.5074, longitude: -0.1278, altitude: 0.0),
      label: "London",
      style: .pin(.init(scale: 2.0))
  )
}

Questa pagina mostra come personalizzare i marcatori nei seguenti modi:

Scala il marcatore

Per scalare un indicatore, utilizza l'opzione scale:

Map(mode: .hybrid) {
  Marker(
      position: .init(latitude: 35.6762, longitude: 139.6503, altitude: 0.0),
        label: "Tokyo",
        style: .pin(
          .init(
            backgroundColor: .blue,
            borderColor: .yellow,
            scale: 2.0
            ) {Text("G").minimumScaleFactor(0.01)}
        )
  )
}

Modificare il colore dello sfondo

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

Map(mode: .hybrid){
  Marker(
    position: .init(latitude: 48.8566, longitude: 2.3522, altitude: 0.0),
    label: "Paris",
    style: .pin(.init(backgroundColor: .yellow)) // Changes the pin's background color
  )
}

Modificare il colore del bordo

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

Map(mode: .hybrid){
  Marker(
    position: .init(latitude: -22.9068, longitude: -43.1729, altitude: 0.0),
    label: "Rio de Janeiro",
    style: .pin(.init(backgroundColor: .green, borderColor: .brown)) // Customizes the pin border
  )
}

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(mode: .hybrid){
  Marker(
    position: .init(latitude: 25.2048, longitude: 55.2708, altitude: 0.0),
    label: "Dubai",
    style: .pin(.init(backgroundColor: .green)) {
        Text("D") // Adds text inside the marker glyph
    }
  )
}