สร้างเครื่องหมายด้วยมุมมองที่กำหนดเอง

คุณสามารถใช้ Marker เพื่อแสดงผลลำดับชั้น View ของ SwiftUI ที่กำหนดเองเป็นมาร์กเกอร์บน Map แบบ 3 มิติ มาร์กเกอร์มุมมองที่กำหนดเองช่วยให้คุณแสดงเลย์เอาต์ SwiftUI ที่สมบูรณ์ การควบคุมแบบโต้ตอบ และภาพเคลื่อนไหวที่ยึดตามพิกัดทางภูมิศาสตร์

เพิ่มมาร์กเกอร์มุมมองที่กำหนดเอง

หากต้องการเพิ่มมาร์กเกอร์มุมมองที่กำหนดเองลงใน Map ให้ประกาศ a Marker ภายในเครื่องมือสร้างเนื้อหาของแผนที่ ระบุ position โดยใช้ค่า LatLngAltitude และระบุ View ของ SwiftUI ที่กำหนดเองใน Closure content ต่อท้าย

หากคุณละเว้น Closure 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 เริ่มต้น

คุณสามารถแสดงผล Pin ที่ปรับแต่งได้โดยส่ง Pinที่เริ่มต้นด้วย Pin.Configurationไปยัง Marker Closure เนื้อหา แทนการสร้าง View ของ SwiftUI ที่กำหนดเองทั้งหมด

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 โฮสต์ View ของ SwiftUI คุณจึงแนบตัวปรับแต่งท่าทางสัมผัสมาตรฐานของ SwiftUI (เช่น .onTapGesture) และภาพเคลื่อนไหวของ SwiftUI เข้ากับมุมมองภายใน Closure เนื้อหา 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 ในแนวตั้งและวิธีโต้ตอบ กับป้ายกำกับหรือมาร์กเกอร์ของแผนที่ที่ซ้อนทับกันได้โดยส่งพารามิเตอร์ไปยัง Marker.init

  • โหมดความสูง: ส่งค่า AltitudeMode ไปยังพารามิเตอร์ altitudeMode โดยค่าเริ่มต้น Marker จะใช้ AltitudeMode.clampToGround
  • การดำเนินการสำหรับการซ้อนทับ: ส่งค่า CollisionBehavior ไปยังพารามิเตอร์ collisionBehavior (ค่าเริ่มต้นคือ CollisionBehavior.required) และใช้ collisionPriority (Int?) เพื่อระบุลำดับความสำคัญสัมพัทธ์เมื่อ มาร์กเกอร์ที่ไม่บังคับซ้อนทับกัน (ค่าที่สูงกว่าจะระบุลำดับความสำคัญที่สูงกว่า)