Anda dapat menyesuaikan tampilan penanda dengan mengonfigurasi objek PinStyle. Jenis PinStyle memberikan opsi untuk mengubah warna latar belakang dan batas, teks dan warna glyph, ketinggian, gambar yang akan digunakan, dan opsi lainnya untuk penyesuaian tambahan.
Contoh kode berikut menunjukkan cara membuat penanda baru dan menata gayanya menggunakan beberapa opsi penyesuaian yang tersedia:
Map(mode: .hybrid) {
Marker(
position: .init(latitude: 51.5074, longitude: -0.1278, altitude: 0.0),
label: "London",
style: .pin(.init(scale: 2.0))
)
}
Halaman ini menunjukkan cara menyesuaikan penanda dengan cara berikut:
Menskalakan penanda
Untuk menskalakan penanda, gunakan opsi 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)}
)
)
}
Mengubah warna latar belakang
Gunakan opsi PinElement.background untuk mengubah warna latar belakang penanda:
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
)
}
Mengubah warna batas
Gunakan opsi markerOptions.borderColor untuk mengubah warna batas penanda:
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
)
}
Menambahkan teks ke glif
Gunakan metode markerOptions.glyph untuk mengganti glyph default dengan karakter
teks. Glyph teks penanda diskalakan dengan penanda:
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
}
)
}