تستخدم Google تكنولوجيا الذكاء الاصطناعي لترجمة المحتوى إلى لغتك المفضّلة، وقد تتضمّن بعض الأخطاء.

إنشاء علامات باستخدام طرق عرض مخصّصة

يمكنك استخدام Marker لعرض التسلسلات الهرمية المخصّصة لـ View في SwiftUI كعلامات على ثلاثي الأبعاد Map. تتيح لك علامات العرض المخصّصة عرض تنسيقات SwiftUI غنية وعناصر تحكّم تفاعلية ورسوم متحركة مرتبطة بإحداثيات جغرافية.

إضافة علامة عرض مخصّصة

لإضافة علامة عرض مخصّصة إلى Map، عليك تعريف a 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())
      }
    }
  }
}

تخصيص طريقة العرض التلقائية لـ Pin

بدلاً من إنشاء View مخصّص بالكامل في SwiftUI، يمكنك عرض دبوس مخصّص من خلال تمرير Pin تم تهيئته باستخدام Pin.Configuration إلى الإغلاق Marker في 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 يستضيف View في SwiftUI، يمكنك إرفاق معدِّلات الإيماءات العادية في SwiftUI (مثل .onTapGesture) والرسوم المتحركة في SwiftUI مباشرةً بالعرض داخل الإغلاق `content` في 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?) لتحديد الأولوية النسبية عند تداخل العلامات الاختيارية (تشير القيمة الأعلى إلى أولوية أعلى).