ایجاد نشانگر با نماهای سفارشی

می‌توانید از Marker برای ارائه سلسله‌مراتب SwiftUI View سفارشی به‌عنوان نشانگر در Map سه‌بعدی استفاده کنید. نشانگرهای نمای سفارشی به شما امکان می‌دهند طرح‌بندی‌های غنی SwiftUI، کنترل‌های تعاملی، و پویانمایی‌های لنگرانداخته به مختصات جغرافیایی را نمایش دهید.

افزودن نشانگر نمای سفارشی

برای افزودن نشانگر نمای سفارشی به Map، Marker را در سازنده محتوای نقشه اعلام کنید، position آن را بااستفاده از مقدار LatLngAltitude مشخص کنید، و View SwiftUI سفارشی خود را در بسته شدن content انتهایی ارائه دهید.

اگر بسته شدن 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())
      }
    }
  }
}

سفارشی‌سازی نمای پیش‌فرض «سنجاق»

به‌جای ساختن 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?) برای مشخص کردن اولویت نسبی هنگام تصادم نشانگرهای اختیاری استفاده کنید (مقدار بالاتر نشان‌دهنده اولویت بالاتر است).