맞춤 뷰로 마커 만들기

Marker를 사용하여 맞춤 SwiftUI View 계층 구조를 3D Map의 마커로 렌더링할 수 있습니다. 맞춤 뷰 마커를 사용하면 지리적 좌표에 고정된 풍부한 SwiftUI 레이아웃, 대화형 컨트롤, 애니메이션을 표시할 수 있습니다.

맞춤 뷰 마커 추가

` Map`에 맞춤 뷰 마커를 추가하려면 지도 콘텐츠 빌더 내에서 ` a Marker`를 선언하고 `position` 값을 사용하여 ` LatLngAltitude `를 지정한 후 후행 `content` 클로저에 맞춤 SwiftUI `View`를 제공합니다.

content 클로저를 생략하면 Marker가 기본 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())
      }
    }
  }
}

기본 Pin 뷰 맞춤설정

완전히 맞춤화된 SwiftUI View를 빌드하는 대신 맞춤설정된 핀을 Pin 을(를) Pin.Configuration 으로 초기화된 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
          )
        )
      }
    }
  }
}

상호작용 및 애니메이션 처리

Marker는 SwiftUI View를 호스팅하므로 표준 SwiftUI 제스처 수정자 (예: .onTapGesture) 및 SwiftUI 애니메이션을 Marker 콘텐츠 클로저 내의 뷰에 직접 연결할 수 있습니다.

또한 Marker은 MapContentAnchorable을 준수하므로 Popover를 마커에 고정할 수 있습니다. 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")
      }
    }
  }
}

고도 및 충돌 동작 구성

Marker.init에 매개변수를 전달하여 Marker가 세로로 배치되는 방식과 겹치는 지도 라벨 또는 마커와 상호작용하는 방식을 맞춤설정할 수 있습니다.

  • 고도 모드: AltitudeMode 값을 altitudeMode 매개변수에 전달합니다. 기본적으로 Marker는 AltitudeMode.clampToGround를 사용합니다.
  • 충돌 동작: CollisionBehavior 값을 collisionBehavior 매개변수에 전달하고 (기본값은 CollisionBehavior.required) collisionPriority (Int?)를 사용하여 선택적 마커가 충돌할 때 상대적 우선순위를 지정합니다 (값이 높을수록 우선순위가 높음).