Un pop-over affiche du contenu (généralement du texte ou des images) dans une fenêtre d'infobulle au-dessus de la carte, à un emplacement donné. Le pop-over se compose d'une zone de contenu et d'un pied effilé. L'extrémité du pied est reliée à un point géographique spécifié sur la carte.
En règle générale, vous associez un pop-up à un repère à l'aide du modificateur .popover, mais vous pouvez également associer un pop-up à une coordonnée LatLng spécifique avec altitude, ou le décaler par rapport à un repère.
Ajouter un pop-over
Pour ajouter un pop-over, créez une entité Popover et définissez ses options, y compris le mode de position et d'altitude. La position est un objet LatLngAltitude qui détermine l'emplacement du pop-up. Vous pouvez contrôler la façon dont l'altitude est interprétée lors de l'ancrage par LatLngAltitude en définissant le mode d'altitude. Si l'ancrage se fait sur un repère, la position de ce repère est utilisée à la place.
Le contenu d'un pop-over peut être personnalisé à l'aide de vues SwiftUI. Vous pouvez fournir des mises en page personnalisées en transmettant une fermeture de générateur de vue à l'entité Popover ou au modificateur .popover.
Ajouter un pop-over à un objet LatLngAltitude
L'exemple de code suivant ajoute un pop-over à un objet 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")
}
}
}
}
Ajouter un pop-over à un repère
L'exemple de code suivant ajoute un pop-over à un repère :
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()
}
}
}
}