Tạo điểm đánh dấu bằng chế độ xem tuỳ chỉnh

Bạn có thể sử dụng Marker để kết xuất các hệ phân cấp View SwiftUI tuỳ chỉnh dưới dạng điểm đánh dấu trên 3D Map. Điểm đánh dấu khung hiển thị tuỳ chỉnh cho phép bạn hiển thị các bố cục SwiftUI phong phú, thành phần điều khiển tương tác và ảnh động được neo vào toạ độ địa lý.

Thêm điểm đánh dấu khung hiển thị tuỳ chỉnh

Để thêm điểm đánh dấu khung hiển thị tuỳ chỉnh vào Map, hãy khai báo một Marker bên trong trình tạo nội dung bản đồ, chỉ định position bằng giá trị LatLngAltitude và cung cấp View SwiftUI tuỳ chỉnh trong dấu đóng content.

Nếu bạn bỏ qua dấu đóng content, Marker sẽ kết xuất khung hiển thị mặc định 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())
      }
    }
  }
}

Tuỳ chỉnh khung hiển thị Pin mặc định

Thay vì tạo View SwiftUI hoàn toàn tuỳ chỉnh, bạn có thể kết xuất ghim tuỳ chỉnh bằng cách truyền Pin được khởi chạy bằng Pin.Configuration vào dấu đóng nội dung 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
          )
        )
      }
    }
  }
}

Xử lý các lượt tương tác và ảnh động

Vì Marker lưu trữ View SwiftUI, nên bạn có thể đính kèm trực tiếp các đối tượng sửa đổi cử chỉ SwiftUI tiêu chuẩn (chẳng hạn như .onTapGesture) và ảnh động SwiftUI vào khung hiển thị bên trong dấu đóng nội dung Marker.

Ngoài ra, Marker tuân thủ MapContentAnchorable, cho phép bạn neo Popover vào điểm đánh dấu bằng đối tượng sửa đổi 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")
      }
    }
  }
}

Định cấu hình độ cao và hành vi va chạm

Bạn có thể tuỳ chỉnh cách Marker được định vị theo chiều dọc và cách tương tác với các nhãn hoặc điểm đánh dấu bản đồ chồng chéo bằng cách truyền các tham số vào Marker.init:

  • Chế độ độ cao: Truyền giá trị AltitudeMode vào tham số altitudeMode. Theo mặc định, Marker sử dụng AltitudeMode.clampToGround.
  • Trạng thái va chạm: Truyền giá trị CollisionBehavior vào tham số collisionBehavior (mặc định là CollisionBehavior.required), và sử dụng collisionPriority (Int?) để chỉ định mức độ ưu tiên tương đối khi các điểm đánh dấu không bắt buộc va chạm (giá trị càng cao thì mức độ ưu tiên càng cao).