
একটি পপওভার ম্যাপের উপরে একটি নির্দিষ্ট স্থানে, একটি তথ্য বুদবুদ উইন্ডোতে বিষয়বস্তু (সাধারণত লেখা বা ছবি) প্রদর্শন করে। পপওভারটির একটি বিষয়বস্তু এলাকা এবং একটি সরু ডাঁটা থাকে। ডাঁটার অগ্রভাগটি ম্যাপের একটি নির্দিষ্ট স্থানের সাথে সংযুক্ত থাকে।
সাধারণত আপনি .popover মডিফায়ার ব্যবহার করে কোনো মার্কারের সাথে একটি পপওভার যুক্ত করেন, কিন্তু আপনি উচ্চতা ব্যবহার করে একটি নির্দিষ্ট LatLng স্থানাঙ্কের সাথেও পপওভার যুক্ত করতে পারেন, অথবা এটিকে একটি মার্কার থেকে অফসেট করতে পারেন।
একটি পপওভার যোগ করুন
একটি পপওভার যোগ করতে, একটি Popover এনটিটি তৈরি করুন এবং এর পজিশন ও অল্টিটিউড মোড সহ অপশনগুলো সেট করুন। পজিশন হলো একটি LatLngAltitude অবজেক্ট, যা নির্ধারণ করে পপওভারটি কোথায় প্রদর্শিত হবে। LatLngAltitude দ্বারা অ্যাঙ্করিং করার সময় অল্টিটিউড মোড সেট করার মাধ্যমে আপনি নিয়ন্ত্রণ করতে পারেন যে অল্টিটিউডকে কীভাবে ব্যাখ্যা করা হবে। যদি কোনো মার্কারে অ্যাঙ্করিং করা হয়, তবে তার পরিবর্তে মার্কারের পজিশন ব্যবহার করা হয়।
SwiftUI ভিউ ব্যবহার করে একটি পপওভারের বিষয়বস্তু কাস্টমাইজ করা যায়। 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(latitude: 37.8270, longitude: -122.4230)) {
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(latitude: 37.7955, longitude: -122.3937)) {
Marker(position: ferryBuilding)
.popover(isOpen: $isOpen) {
Text("Ferry Building")
}
.onTap {
isOpen.toggle()
}
}
}
}