পপওভার

প্ল্যাটফর্ম বেছে নিন: Android iOS JavaScript

পপওভার কোনও নির্দিষ্ট লোকেশনে ম্যাপের উপরে তথ্য বাবল উইন্ডোতে কন্টেন্ট (সাধারণত টেক্সট বা ছবি) দেখায়। পপওভারে একটি কন্টেন্ট এরিয়া এবং একটি টেপার্ড স্টেম আছে। স্টেমের ডগা ম্যাপের নির্দিষ্ট লোকেশনের সাথে অ্যাটাচ করা থাকে।

সাধারণত আপনি .popover মডিফায়ার ব্যবহার করে মার্কার-এর সাথে পপওভার অ্যাটাচ করবেন, তবে আপনি LatLng নির্দিষ্ট স্থানাঙ্কের সাথেও পপওভার অ্যাটাচ করতে পারেন যার সাথে অল্টিটিউড মোড , বা মার্কার থেকে অফসেট করা থাকে।

পপওভার যোগ করুন

পপওভার যোগ করতে, একটি Popover এন্টিটি তৈরি করুন এবং অবস্থান ও উচ্চতা মোড সহ এর বিকল্পগুলি সেট করুন। পজিশন হল একটি LatLngAltitude অবজেক্ট, যা পপওভার কোথায় দেখানো হবে তা নির্ধারণ করে। LatLngAltitude-এর মাধ্যমে অ্যাঙ্কর করার সময় অল্টিটিউড মোড সেট করে আপনি অল্টিটিউড কীভাবে ব্যাখ্যা করা হবে তা নিয়ন্ত্রণ করতে পারবেন। মার্কারের সাথে অ্যাঙ্কর করা হলে, পরিবর্তে মার্কারের পজিশন ব্যবহার করা হয়।

SwiftUI Views ব্যবহার করে পপওভারের কন্টেন্ট কাস্টমাইজ করা যেতে পারে। আপনি Popover এন্টিটি বা .popover মডিফায়ারে ভিউ বিল্ডার ক্লোজার পাস করে কাস্টম লেআউট প্রদান করতে পারেন।

গুরুত্বপূর্ণ: ব্যবহারকারীর সেরা অভিজ্ঞতার জন্য, ম্যাপে যেকোনও সময়ে শুধুমাত্র একটি পপওভার খোলা থাকতে হবে। একাধিক পপওভার ম্যাপকে অপরিচ্ছন্ন করে তোলে।

LatLngAltitude অবজেক্টে পপওভার যোগ করুন

নিম্নলিখিত কোড স্যাম্পেল LatLngAltitude অবজেক্টে একটি পপওভার যোগ করে:

import GoogleMaps3D
import SwiftUI

struct SimpleCoordinatePopover: View {
  @State private var isOpen = true
  // Alcatraz Island coordinates
  private let alcatraz = LatLngAltitude(latitude: 37.8270, longitude: -122.4230)

  var body: some View {
    Map(initialCamera:
      .init(center: .init(latitude: 37.8270, longitude: -122.4230)),
      mode: .hybrid) {
        Popover(
          positionAnchor: alcatraz,
          isOpen: $isOpen
        ) {
          Text("Alcatraz Island")
        }
      }
  }
}

মার্কারে পপওভার যোগ করুন

নিম্নলিখিত কোডের নমুনাটি একটি মার্কারের সাথে পপওভার যোগ করে:

import GoogleMaps3D
import SwiftUI

struct SimpleMarkerPopover: View {
  @State private var isOpen = false
  // Ferry Building coordinates
  private let ferryBuilding = LatLngAltitude(latitude: 37.7955, longitude: -122.3937)

  var body: some View {
   Map(
      initialCamera: .init(center: .init(latitude: 37.7955, longitude: -122.3937)),
      mode: .hybrid
    ) {
      Marker3D(position: ferryBuilding)
        .popover(isOpen: $isOpen) {
          Text("Ferry Building")
        }
        .onTap {
          isOpen.toggle()
        }
    }
  }
}