Membuat penanda dengan tampilan kustom

Anda dapat menggunakan Marker untuk merender hierarki View SwiftUI kustom sebagai penanda di 3DMap. Penanda tampilan kustom memungkinkan Anda menampilkan tata letak SwiftUI yang kaya, kontrol interaktif, dan animasi yang ditambatkan ke koordinat geografis.

Menambahkan penanda tampilan kustom

Untuk menambahkan penanda tampilan kustom ke Map, deklarasikan a Marker di dalam pembuat konten peta, tentukan position menggunakan nilai LatLngAltitude, dan berikan View SwiftUI kustom Anda dalam penutupan content akhir.

Jika Anda menghilangkan penutupan content, Marker akan merender tampilan default Pin.

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

Menyesuaikan tampilan Pin default

Daripada membuat SwiftUI View yang sepenuhnya kustom, Anda dapat merender pin yang disesuaikan dengan meneruskan Pin yang diinisialisasi dengan Pin.Configuration ke penutupan konten Marker:

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

Menangani interaksi dan animasi

Karena Marker menghosting View SwiftUI, Anda dapat melampirkan pengubah gestur SwiftUI standar (seperti .onTapGesture) dan animasi SwiftUI langsung ke tampilan di dalam penutupan konten Marker.

Selain itu, Marker sesuai dengan MapContentAnchorable, yang memungkinkan Anda menambatkan Popover ke penanda menggunakan popover(isOpen:autoClosedEnabled:autoPanEnabled:style:content:) pengubah:

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

Mengonfigurasi ketinggian dan perilaku saat tumpang tindih

Anda dapat menyesuaikan posisi Marker secara vertikal dan cara interaksinya dengan label atau penanda peta yang tumpang tindih dengan meneruskan parameter ke Marker.init:

  • Mode ketinggian: Teruskan nilai AltitudeMode ke parameter altitudeMode. Secara default, Marker menggunakan AltitudeMode.clampToGround.
  • Perilaku saat tumpang tindih: Teruskan nilai CollisionBehavior ke parameter collisionBehavior (default ke CollisionBehavior.required), dan gunakan collisionPriority (Int?) untuk menentukan prioritas relatif saat penanda opsional bertabrakan (nilai yang lebih tinggi menunjukkan prioritas yang lebih tinggi).