Wygląd markerów możesz dostosować, konfigurując obiekt PinStyle. Typ PinStyle umożliwia zmianę koloru tła i obramowania, tekstu i koloru glifu, wysokości, obrazu do użycia oraz innych opcji dodatkowego dostosowywania.
Poniższy przykładowy kod pokazuje, jak utworzyć nowy znacznik i dostosować go za pomocą niektórych dostępnych opcji:
Map(mode: .hybrid) {
Marker(
position: .init(latitude: 51.5074, longitude: -0.1278, altitude: 0.0),
label: "London",
style: .pin(.init(scale: 2.0))
)
}
Na tej stronie dowiesz się, jak dostosowywać znaczniki:
Skalowanie znacznika
Aby przeskalować znacznik, użyj opcji 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)}
)
)
}
Zmiana koloru tła
Aby zmienić kolor tła znacznika, użyj opcji PinElement.background:
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
)
}
Zmiana koloru obramowania
Aby zmienić kolor obramowania znacznika, użyj opcji markerOptions.borderColor:
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
)
}
Dodawanie tekstu do glifu
Użyj metody markerOptions.glyph, aby zastąpić domyślny znak glifu znakiem tekstowym. Glif tekstowy znacznika jest skalowany wraz ze znacznikiem:
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
}
)
}