कस्टम व्यू की मदद से मार्कर बनाना

Marker का इस्तेमाल करके, कस्टम SwiftUI View की हैरारकी को 3D Map पर मार्कर के तौर पर रेंडर किया जा सकता है. कस्टम व्यू मार्कर की मदद से, रिच SwiftUI लेआउट, इंटरैक्टिव कंट्रोल, और भौगोलिक निर्देशांकों से जुड़े ऐनिमेशन दिखाए जा सकते हैं.

कस्टम व्यू मार्कर जोड़ना

अपने Map में कस्टम व्यू मार्कर जोड़ने के लिए, मैप कॉन्टेंट बिल्डर में Marker का एलान करें. इसके बाद, LatLngAltitude वैल्यू का इस्तेमाल करके, इसके position की जानकारी दें. साथ ही, ट्रेलिंग content क्लोज़र में अपना कस्टम SwiftUI View दें.

अगर 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 बनाने के बजाय, पसंद के मुताबिक पिन रेंडर किया जा सकता है. इसके लिए, Marker कॉन्टेंट क्लोज़र में Pin.Configuration के साथ शुरू किया गया Pin पास करें:

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 को होस्ट करता है. इसलिए, Marker कॉन्टेंट क्लोज़र के अंदर मौजूद व्यू में, स्टैंडर्ड SwiftUI जेस्चर मॉडिफ़ायर (जैसे, .onTapGesture) और SwiftUI ऐनिमेशन सीधे अटैच किए जा सकते हैं.

इसके अलावा, Marker, MapContentAnchorable के मुताबिक है. इसकी मदद से, popover(isOpen:autoClosedEnabled:autoPanEnabled:style:content:) मॉडिफ़ायर का इस्तेमाल करके, मार्कर में Popover को ऐंकर किया जा सकता है:

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?) का इस्तेमाल करें. ज़्यादा वैल्यू का मतलब है कि प्राथमिकता ज़्यादा है.