Créer des repères avec des vues personnalisées

Vous pouvez utiliser Marker pour afficher des hiérarchies View SwiftUI personnalisées sous forme de repères sur une Map 3D. Les repères de vue personnalisés vous permettent d'afficher des mises en page SwiftUI enrichies, des commandes interactives et des animations ancrées à des coordonnées géographiques.

Ajouter un repère de vue personnalisé

Pour ajouter un repère de vue personnalisé à votre Map, déclarez un Marker dans le compilateur de contenu de la carte, spécifiez sa position à l'aide d'une LatLngAltitude valeur et fournissez votre View SwiftUI personnalisée dans la fermeture content finale.

Si vous omettez la fermeture content, Marker affiche une vue par défaut 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())
      }
    }
  }
}

Personnaliser la vue Pin par défaut

Au lieu de créer une SwiftUI View, vous pouvez afficher un repère personnalisé en transmettant un Pin initialisé avec une Pin.Configuration à la Marker fermeture de contenu :

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

Gérer les interactions et les animations

Étant donné que Marker héberge une View SwiftUI, vous pouvez associer directement des modificateurs de geste SwiftUI standards (tels que .onTapGesture) et des animations SwiftUI à la vue dans la fermeture de contenu Marker.

De plus, Marker est conforme à MapContentAnchorable, ce qui vous permet d'ancrer un Popover au repère à l'aide du modificateur 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")
      }
    }
  }
}

Configurer l'altitude et le comportement en cas de collision

Vous pouvez personnaliser la position verticale d'un Marker et son interaction avec les libellés ou repères de carte qui se chevauchent en transmettant des paramètres à Marker.init :

  • Mode d'altitude : transmettez une AltitudeMode valeur au paramètre altitudeMode. Par défaut, Marker utilise AltitudeMode.clampToGround.
  • Comportement en cas de collision : transmettez une valeur CollisionBehavior au paramètre collisionBehavior (la valeur par défaut est CollisionBehavior.required), puis utilisez collisionPriority (Int?) pour spécifier la priorité relative lorsque des repères facultatifs entrent en collision (une valeur plus élevée indique une priorité plus élevée).