יצירת סמנים עם תצוגות בהתאמה אישית

אתם יכולים להשתמש ב-Marker כדי לרנדר היררכיות של View בהתאמה אישית ב-SwiftUI כסמנים בMap תלת-ממדית. סמני תצוגה בהתאמה אישית מאפשרים להציג פריסות עשירות של SwiftUI, פקדים אינטראקטיביים ואנימציות שמעוגנות לקואורדינטות גיאוגרפיות.

הוספת סמן לתצוגה מותאמת אישית

כדי להוסיף סמן תצוגה בהתאמה אישית ל-Map, מגדירים Marker בתוך ה-builder של תוכן המפה, מציינים את ה-position שלו באמצעות ערך LatLngAltitude ומספקים את ה-View של SwiftUI בהתאמה אישית ב-closure הנגרר של 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())
      }
    }
  }
}

התאמה אישית של תצוגת ברירת המחדל של הסיכה

במקום ליצור View מותאם אישית לחלוטין ב-SwiftUI, אפשר להציג סיכה מותאמת אישית על ידי העברת 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 מארח View של SwiftUI, אפשר לצרף משני תנועות סטנדרטיים של 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 ואת האינטראקציה שלו עם תוויות או סמנים חופפים במפה, על ידי העברת פרמטרים אל Marker.init:

  • מצב גובה: מעבירים ערך של AltitudeMode לפרמטר altitudeMode. כברירת מחדל, Marker משתמש ב-AltitudeMode.clampToGround.
  • התנהגות במקרה של חפיפה: מעבירים ערך של CollisionBehavior לפרמטר collisionBehavior (ברירת המחדל היא CollisionBehavior.required), ומשתמשים ב-collisionPriority (Int?) כדי לציין עדיפות יחסית כשיש חפיפה בין סמנים אופציונליים (ערך גבוה יותר מציין עדיפות גבוהה יותר).