Sie können die Darstellung von Markierungen anpassen, indem Sie das PinStyle-Objekt konfigurieren. Der Typ PinStyle bietet Optionen zum Ändern der Hintergrund- und Rahmenfarben, des Glyphentexts und der Glyphenfarbe, der Höhe, des zu verwendenden Bildes und weitere Optionen für zusätzliche Anpassungen.
Im folgenden Codebeispiel sehen Sie, wie Sie eine neue Markierung erstellen und mit einigen der verfügbaren Anpassungsoptionen gestalten:
Map(mode: .hybrid) {
Marker(
position: .init(latitude: 51.5074, longitude: -0.1278, altitude: 0.0),
label: "London",
style: .pin(.init(scale: 2.0))
)
}
Auf dieser Seite wird beschrieben, wie Sie folgende Anpassungen an Markierungen vornehmen:
Größe der Markierung anpassen
Um die Größe einer Markierung anzupassen, verwenden Sie die 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)}
)
)
}
Hintergrundfarbe ändern
Mit der Option PinElement.background können Sie die Hintergrundfarbe einer Markierung ändern:
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
)
}
Rahmenfarbe ändern
Mit der Option markerOptions.borderColor können Sie die Rahmenfarbe einer Markierung ändern:
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
)
}
Glyphe Text hinzufügen
Mit der Methode markerOptions.glyph können Sie das Standardsymbol durch ein Textzeichen ersetzen. Die Textglyphe der Markierung wird mit der Markierung skaliert:
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
}
)
}