Criar marcadores com visualizações personalizadas

Você pode usar Marker para renderizar hierarquias personalizadas de View do SwiftUI como marcadores em um 3D Map. Os marcadores de visualização personalizados permitem mostrar layouts avançados do SwiftUI, controles interativos e animações ancoradas a coordenadas geográficas.

Adicionar um marcador de visualização personalizado

Para adicionar um marcador de visualização personalizado ao seu Map, declare um Marker no builder de conteúdo do mapa, especifique a position usando um LatLngAltitude valor e forneça sua View personalizada do SwiftUI no fechamento content final.

Se você omitir o fechamento content, Marker vai renderizar uma visualização padrão 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())
      }
    }
  }
}

Personalizar a visualização de pin padrão

Em vez de criar um SwiftUI View totalmente personalizado, você pode renderizar um pin personalizado transmitindo um Pin inicializado com um Pin.Configuration para o fechamento de conteúdo 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
          )
        )
      }
    }
  }
}

Processar interações e animações

Como Marker hospeda uma View do SwiftUI, você pode anexar modificadores de gesto padrão do SwiftUI (como .onTapGesture) e animações do SwiftUI diretamente à visualização dentro do fechamento de conteúdo Marker.

Além disso, Marker está em conformidade com MapContentAnchorable, que permite ancorar um Popover ao marcador usando o popover(isOpen:autoClosedEnabled:autoPanEnabled:style:content:) modificador:

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

Configurar a altitude e o comportamento em caso de conflito

Você pode personalizar como um Marker é posicionado verticalmente e como ele interage com marcadores ou rótulos de mapa sobrepostos transmitindo parâmetros para Marker.init:

  • Modo de altitude: transmita um AltitudeMode valor para o parâmetro altitudeMode. Por padrão, Marker usa AltitudeMode.clampToGround.
  • Comportamento em caso de conflito: transmita um valor CollisionBehavior para o parâmetro collisionBehavior (o padrão é CollisionBehavior.required), e use collisionPriority (Int?) para especificar a prioridade relativa quando marcadores opcionais entram em conflito (um valor mais alto indica maior prioridade).