पॉप-ओवर, मैप पर किसी जगह की जानकारी दिखाने के लिए, इन्फ़ो बबल विंडो में कॉन्टेंट (आम तौर पर टेक्स्ट या इमेज) दिखाता है. पॉप-ओवर में, कॉन्टेंट दिखाने के लिए एक जगह होती है और एक पतला तना होता है. तने का सिरा, मैप पर किसी तय जगह से जुड़ा होता है.
आम तौर पर, पॉप-ओवर को
मार्कर से जोड़ने के लिए, .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(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()
}
}
}
}