Markierungen mit benutzerdefinierten Ansichten erstellen

Mit Marker können Sie benutzerdefinierte SwiftUI-View Hierarchien als Markierungen auf einer 3D Map rendern. Mit benutzerdefinierten Ansichtsmarkierungen können Sie umfangreiche SwiftUI-Layouts, interaktive Steuerelemente und Animationen anzeigen, die an geografische Koordinaten verankert sind.

Benutzerdefinierte Ansichtsmarkierung hinzufügen

Wenn Sie Ihrer Map eine benutzerdefinierte Ansichtsmarkierung hinzufügen möchten, deklarieren Sie eine Marker im Map-Content-Builder, geben Sie ihre position mit einem LatLngAltitude -Wert an und stellen Sie Ihre benutzerdefinierte SwiftUI-View in der nachfolgenden content-Closure bereit.

Wenn Sie die content-Closure weglassen, rendert Marker eine Standard Pin-Ansicht.

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

Standardansicht „Pin“ anpassen

Anstatt eine vollständig benutzerdefinierte SwiftUI View zu erstellen, können Sie eine angepasste Stecknadel rendern, indem Sie eine Pin initialisierte mit einer Pin.Configuration an die Marker Content-Closure übergeben:

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

Interaktionen und Animationen verarbeiten

Da Marker eine SwiftUI-View hostet, können Sie Standard-SwiftUI-Gestenmodifikatoren (z. B. .onTapGesture) und SwiftUI-Animationen direkt an die Ansicht in der Marker-Content-Closure anhängen.

Außerdem entspricht Marker MapContentAnchorable, mit dem Sie mit dem Modifikator popover(isOpen:autoClosedEnabled:autoPanEnabled:style:content:) ein Popover an der Markierung verankern können:

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

Höhe und Konfliktverhalten konfigurieren

Sie können anpassen, wie eine Marker vertikal positioniert wird und wie sie mit überlappenden Kartenlabels oder Markierungen interagiert, indem Sie Parameter an Marker.init übergeben:

  • Höhenmodus: Übergeben Sie einen AltitudeMode Wert an den Parameter altitudeMode. Standardmäßig verwendet Marker AltitudeMode.clampToGround.
  • Konfliktverhalten: Übergeben Sie einen CollisionBehavior -Wert an den Parameter collisionBehavior (Standardwert: CollisionBehavior.required) und verwenden Sie collisionPriority (Int?), um die relative Priorität bei Kollisionen optionaler Markierungen anzugeben. Ein höherer Wert bedeutet eine höhere Priorität.