Temel işaretçi özelleştirmesi

Platform seçin: Android iOS JavaScript

Özel stilli işaretçiler içeren San Francisco haritası

(Marker3D.Style.pin(_:)) öğesine bir Pin.Configuration örneği ileterek işaretçilerin görünümünü özelleştirebilirsiniz. Bu sayede arka plan ve kenarlık renklerini, glif metnini ve rengini, rakımı, kullanılacak resmi ve daha fazla özelleştirme seçeneğini değiştirebilirsiniz.

Aşağıdaki kod örneğinde, yeni bir işaretçinin nasıl oluşturulacağı ve mevcut özelleştirme seçeneklerinden bazıları kullanılarak nasıl stil oluşturulacağı gösterilmektedir:

Map(mode: .hybrid) {
  Marker3D(
      position: .init(latitude: 51.5074, longitude: -0.1278, altitude: 0.0),
      label: "London",
      style: .pin(.init(scale: 2.0))
  )
}

Bu sayfada, işaretçileri aşağıdaki yöntemlerle nasıl özelleştireceğiniz açıklanmaktadır:

İşaretçiyi ölçeklendirme

Bir işaretçiyi ölçeklendirmek için scale seçeneğini kullanın:

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

Arka plan rengini değiştirme

Bir işaretçinin arka plan rengini değiştirmek için Pin.Configuration üzerinde backgroundColor parametresini kullanın:

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

Kenarlık rengini değiştirme

Bir işaretçinin kenarlık rengini değiştirmek için Pin.Configuration üzerinde borderColor parametresini kullanın:

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

Gliflere metin ekleme

Varsayılan glifi bir metin karakteriyle değiştirmek için Pin.Configuration üzerinde @ViewBuilder glif kapatma parametresini kullanın. İşaretçinin metin glifi, işaretçiyle birlikte ölçeklenir:

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