Tworzenie znaczników z widokami niestandardowymi

Za pomocą elementu Marker możesz renderować niestandardowe hierarchie View SwiftUI jako znaczniki na mapie 3D Map. Znaczniki widoku niestandardowego umożliwiają wyświetlanie bogatych układów SwiftUI, interaktywnych elementów sterujących i animacji zakotwiczonych we współrzędnych geograficznych.

Dodawanie znacznika widoku niestandardowego

Aby dodać znacznik widoku niestandardowego do elementu Map, zadeklaruj element Marker w konstruktorze treści mapy, określ jego position za pomocą LatLngAltitude wartości i podaj niestandardowy element View SwiftUI w zamykającym domknięciu content.

Jeśli pominiesz domknięcie content, element Marker wyrenderuje domyślny Pin widok.

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

Dostosowywanie domyślnego widoku Pin

Zamiast tworzyć całkowicie niestandardowy element SwiftUI View, możesz wyrenderować dostosowaną pinezkę, przekazując element Pin zainicjowany za pomocą elementu Pin.Configuration do domknięcia treści 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
          )
        )
      }
    }
  }
}

Obsługa interakcji i animacji

Ponieważ element Marker zawiera element View SwiftUI, możesz dołączyć standardowe modyfikatory gestów SwiftUI (np. .onTapGesture) i animacje SwiftUI bezpośrednio do widoku w domknięciu treści Marker.

Dodatkowo element Marker jest zgodny z MapContentAnchorable, co umożliwia zakotwiczenie elementu Popover do znacznika za pomocą modyfikatora popover(isOpen:autoClosedEnabled:autoPanEnabled:style:content:):

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

Konfigurowanie wysokości i zachowania w przypadku kolizji

Możesz dostosować sposób pionowego ustawienia elementu Marker oraz sposób jego interakcji z nakładającymi się etykietami lub znacznikami mapy, przekazując parametry do elementu Marker.init:

  • Tryb wysokości: przekaż wartość AltitudeMode do parametru altitudeMode. Domyślnie element Marker używa AltitudeMode.clampToGround.
  • Zachowanie przy kolizji znaczników: przekaż wartość CollisionBehavior do parametru collisionBehavior (domyślnie CollisionBehavior.required), i użyj elementu collisionPriority (Int?), aby określić względny priorytet w przypadku kolizji opcjonalnych znaczników (wyższa wartość oznacza wyższy priorytet).