Vous pouvez personnaliser l'apparence des repères en configurant l'objet PinStyle. Le type PinStyle offre des options permettant de modifier les couleurs de l'arrière-plan et de la bordure, le texte et la couleur du glyphe, l'altitude, l'image à utiliser, ainsi que d'autres options de personnalisation.
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) {
Marker(
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 mettre un repère à l'échelle, utilisez l'option 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)}
)
)
}
Modifier la couleur d'arrière-plan
Utilisez l'option PinElement.background pour modifier la couleur d'arrière-plan d'un repère :
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
)
}
Modifier la couleur de la bordure
Utilisez l'option markerOptions.borderColor pour modifier la couleur de la bordure d'un repère :
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
)
}
Ajouter du texte à un glyphe
Utilisez la méthode markerOptions.glyph 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){
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
}
)
}