Creare indicatori con visualizzazioni personalizzate

Puoi utilizzare Marker per eseguire il rendering di gerarchie View SwiftUI personalizzate come indicatori su una Map 3D. Gli indicatori di visualizzazione personalizzati ti consentono di mostrare layout SwiftUI avanzati, controlli interattivi e animazioni ancorati alle coordinate geografiche.

Aggiungere un indicatore di visualizzazione personalizzato

Per aggiungere un indicatore di visualizzazione personalizzato alla Map, dichiara un Marker all'interno del generatore di contenuti della mappa, specifica la relativa position utilizzando un LatLngAltitude valore e fornisci la View SwiftUI personalizzata nella chiusura content finale.

Se ometti la chiusura content, Marker esegue il rendering di una visualizzazione predefinita 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())
      }
    }
  }
}

Personalizzare la visualizzazione Pin predefinita

Anziché creare una SwiftUI View, puoi eseguire il rendering di un indicatore personalizzato passando un Pin inizializzato con un Pin.Configuration alla Marker chiusura del contenuto:

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

Gestire interazioni e animazioni

Poiché Marker ospita una View SwiftUI, puoi collegare i modificatori di gesti SwiftUI standard (ad es. .onTapGesture) e le animazioni SwiftUI direttamente alla visualizzazione all'interno della chiusura del contenuto Marker.

Inoltre, Marker è conforme a MapContentAnchorable, che ti consente di ancorare un Popover all'indicatore utilizzando il popover(isOpen:autoClosedEnabled:autoPanEnabled:style:content:) modificatore:

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

Configurare il comportamento di altitudine e collisione

Puoi personalizzare il posizionamento verticale di un Marker e il modo in cui interagisce con le etichette o gli indicatori della mappa sovrapposti passando i parametri a Marker.init:

  • Modalità altitudine: passa un AltitudeMode valore al parametro altitudeMode. Per impostazione predefinita, Marker utilizza AltitudeMode.clampToGround.
  • Comportamento della sovrapposizione: passa un valore CollisionBehavior al parametro collisionBehavior (il valore predefinito è CollisionBehavior.required), e utilizza collisionPriority (Int?) per specificare la priorità relativa quando gli indicatori facoltativi entrano in sovrapposizione (un valore più alto indica una priorità più alta).