Temel işaretçi özelleştirmesi

Platform seçin: Android iOS JavaScript

Özel olarak şekillendirilmiş işaretçilerin bulunduğu San Francisco haritası

PinStyle nesnesini yapılandırarak işaretçilerin görünümünü özelleştirebilirsiniz. PinStyle türü, arka plan ve kenarlık renklerini, glif metnini ve rengini, yüksekliği, kullanılacak resmi ve ek özelleştirme için daha fazla seçeneği değiştirme imkanı sunar.

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 verileceği gösterilmektedir:

Map(mode: .hybrid) {
  Marker(
      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 şekillerde nasıl özelleştireceğiniz gösterilmektedir:

İşaretçiyi ölçeklendirme

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

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

Arka plan rengini değiştirme

Bir işaretçinin arka plan rengini değiştirmek için PinElement.background seçeneğini kullanın:

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

Kenarlık rengini değiştirme

Bir işaretçinin kenarlık rengini değiştirmek için markerOptions.borderColor seçeneğini kullanın:

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

Glife metin ekleme

Varsayılan glifi bir metin karakteriyle değiştirmek için markerOptions.glyph yöntemini kullanın. İşaretçinin metin glifi, işaretçiyle birlikte ölçeklenir:

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