Penyesuaian penanda dasar

Pilih platform: Android iOS JavaScript

Peta San Francisco dengan penanda bergaya kustom

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) {
  Marker3D(
      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) {
  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)}
        )
  )
}

Mengubah warna latar belakang

Gunakan opsi PinElement.background untuk mengubah warna latar belakang penanda:

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
  )
}

Mengubah warna batas

Gunakan opsi markerOptions.borderColor untuk mengubah warna batas penanda:

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
  )
}

Menambahkan teks ke glif

Gunakan metode markerOptions.glyph untuk mengganti glyph default dengan karakter teks. Glyph teks penanda diskalakan dengan penanda:

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
    }
  )
}