কাস্টম ভিউ সহ মার্কার তৈরি করুন

আপনি 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 তৈরি করার পরিবর্তে, আপনি একটি Pin.Configuration দিয়ে শুরু করা Pin 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(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?) ব্যবহার করুন।