Özel görünümlerle işaretçi oluşturma

Özel SwiftUI View hiyerarşilerini 3D Map üzerinde işaretçi olarak oluşturmak için Marker kullanabilirsiniz. Özel görünüm işaretçileri, coğrafi koordinatlara sabitlenmiş zengin SwiftUI düzenleri, etkileşimli kontroller ve animasyonlar görüntülemenize olanak tanır.

Özel görünüm işaretçisi ekleme

Map öğenize özel görünüm işaretçisi eklemek için harita içerik oluşturucusunda bir Marker tanımlayın, LatLngAltitude değerini kullanarak position değerini belirtin ve sondaki content kapanışında özel SwiftUI View değerinizi sağlayın.

content kapanışını atlarsanız Marker varsayılan bir Pin görünümü oluşturur.

import GoogleMaps3D
import SwiftUI

struct CustomMarkerExampleView: View {
  var body: some View {
    Map(mode: .hybrid) {
      Marker(
        position: LatLngAltitude(
          latitude: 40.7484,
          longitude: -73.9857,
          altitude: 100.0
        ),
        altitudeMode: .relativeToGround
      ) {
        Text("Empire State Building")
          .padding(.horizontal, 12)
          .padding(.vertical, 6)
          .background(Color.white)
          .clipShape(Capsule())
      }
    }
  }
}

Varsayılan raptiye görünümünü özelleştirme

Tamamen özel bir SwiftUI View oluşturmak yerine, Marker içerik kapanışına Pin.Configuration ile başlatılan bir Pin ileterek özelleştirilmiş bir raptiye oluşturabilirsiniz:

import GoogleMaps3D
import SwiftUI

struct CustomPinMarkerExampleView: View {
  var body: some View {
    Map(mode: .hybrid) {
      Marker(
        position: LatLngAltitude(
          latitude: 40.7484,
          longitude: -73.9857,
          altitude: 100.0
        ),
        altitudeMode: .relativeToGround
      ) {
        Pin(
          configuration: .init(
            backgroundColor: .blue,
            borderColor: .white
          )
        )
      }
    }
  }
}

Etkileşimleri ve animasyonları yönetme

Marker, bir SwiftUI View barındırdığından standart SwiftUI hareket değiştiricilerini (ör. .onTapGesture) ve SwiftUI animasyonlarını doğrudan Marker içerik kapatma içindeki görünüme ekleyebilirsiniz.

Ayrıca Marker, MapContentAnchorable ile uyumludur. Bu sayede, popover(isOpen:autoClosedEnabled:autoPanEnabled:style:content:) değiştiricisini kullanarak bir Popover öğesini işaretçiye sabitleyebilirsiniz:

import GoogleMaps3D
import SwiftUI

struct InteractiveMarkerExampleView: View {
  @State private var isPopoverOpen = false

  var body: some View {
    Map(mode: .hybrid) {
      Marker(
        position: LatLngAltitude(
          latitude: 37.7955,
          longitude: -122.3937,
          altitude: 0
        ),
        altitudeMode: .relativeToGround
      ) {
        Pin(configuration: .init(backgroundColor: .black) {
          Image(systemName: "ferry.fill")
            .foregroundStyle(.white)
        })
        .onTapGesture {
          isPopoverOpen.toggle()
        }
      }
      .popover(isOpen: $isPopoverOpen) {
        Text("Ferry Building")
      }
    }
  }
}

Rakım ve çakışma davranışını yapılandırma

Marker öğesinin dikey olarak nasıl konumlandırılacağını ve çakışan harita etiketleri veya işaretçileriyle nasıl etkileşime gireceğini özelleştirmek için Marker.init öğesine parametreler iletebilirsiniz:

  • Yükseklik modu: altitudeMode parametresine bir AltitudeMode değeri iletin. Marker, varsayılan olarak AltitudeMode.clampToGround kullanır.
  • Çakışma davranışı: collisionBehavior parametresine bir CollisionBehavior değeri iletin (varsayılan olarak CollisionBehavior.required) ve isteğe bağlı işaretçiler çakıştığında göreli önceliği belirtmek için collisionPriority (Int?) kullanın (daha yüksek bir değer, daha yüksek önceliği gösterir).