Personnalisation des repères de base

Vous pouvez personnaliser l'apparence des repères en transmettant une Pin.Configuration instance à (Marker3D.Style.pin(_:)) Vous pouvez ainsi modifier les couleurs d'arrière-plan et de bordure, le texte et la couleur du glyphe, l'altitude , l'image à utiliser et d'autres options pour une personnalisation supplémentaire.

L'exemple de code suivant montre comment créer un repère et le styliser à l'aide de certaines des options de personnalisation disponibles :

Map(mode: .hybrid) {
  Marker3D(
      position: .init(latitude: 51.5074, longitude: -0.1278, altitude: 0.0),
      label: "London",
      style: .pin(.init(scale: 2.0))
  )
}

Cette page explique comment personnaliser les repères de différentes manières :

• Redimensionner le repère
• Modifier la couleur d'arrière-plan
• Modifier la couleur de la bordure
• Ajouter du texte à un glyphe

Redimensionner le repère

Pour redimensionner un repère, utilisez l'option scale :

Map(mode: .hybrid) {
  Marker3D(
      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)}
        )
  )
}

Modifier la couleur d'arrière-plan

Utilisez le paramètre backgroundColor sur Pin.Configuration pour modifier la couleur d'arrière-plan d'un repère :

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

Modifier la couleur de la bordure

Utilisez le paramètre borderColor sur Pin.Configuration pour modifier la couleur de la bordure d'un repère :

Map(mode: .hybrid){
  Marker3D(
    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
  )
}

Ajouter du texte à un glyphe

Utilisez le paramètre de fermeture @ViewBuilder du glyphe sur Pin.Configuration pour remplacer le glyphe par défaut par un caractère de texte. Le glyphe de texte du repère est mis à l'échelle avec le repère :

Map(mode: .hybrid){
  Marker3D(
    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
    })
  )
}