पोपओवर, मैप पर किसी जगह की जानकारी देने वाली विंडो में कॉन्टेंट (आम तौर पर टेक्स्ट या इमेज) दिखाता है. यह विंडो, मैप के ऊपर दिखती है. पॉपओवर में कॉन्टेंट एरिया और पतला तना होता है. स्टेम का सिरा, मैप पर किसी तय जगह से जुड़ा होता है.
आम तौर पर, .popover मॉडिफ़ायर का इस्तेमाल करके, किसी मार्कर से पॉपओवर अटैच किया जाता है. हालांकि, किसी पॉपओवर को ऊंचाई के साथ किसी खास LatLng कोऑर्डिनेट से भी अटैच किया जा सकता है. इसके अलावा, इसे किसी मार्कर से ऑफ़सेट भी किया जा सकता है.
पॉपओवर जोड़ना
पॉपओवर जोड़ने के लिए, Popover इकाई बनाएं और उसके विकल्प सेट करें. इनमें पोज़िशन और ऊंचाई का मोड शामिल है. पोजीशन, एक LatLngAltitude ऑब्जेक्ट है. इससे यह तय होता है कि पॉपओवर कहां दिखेगा. ऊंचाई का मोड सेट करके, यह कंट्रोल किया जा सकता है कि LatLngAltitude से ऐंकर करते समय ऊंचाई को कैसे समझा जाए. अगर मार्कर से ऐंकर किया जा रहा है, तो मार्कर की पोज़िशन का इस्तेमाल किया जाता है.
SwiftUI व्यू का इस्तेमाल करके, पॉपओवर के कॉन्टेंट को पसंद के मुताबिक बनाया जा सकता है. Popover इकाई या .popover मॉडिफ़ायर को View builder closure पास करके, कस्टम लेआउट दिए जा सकते हैं.
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()
}
}
}
}