Pop-ups

Sélectionnez une plate-forme : Android iOS JavaScript

Carte de San Francisco avec un repère et un pop-over au-dessus du Ferry Building.

Une fenêtre pop-up affiche du contenu (généralement du texte ou des images) dans une infobulle au-dessus de la carte, à un emplacement donné. La fenêtre pop-up 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 une fenêtre pop-up à un repère à l'aide du .popover modificateur, mais vous pouvez également l'associer à une coordonnée LatLng spécifique avec une altitude ou la décaler par rapport à un repère.

Ajouter une fenêtre pop-up

Pour ajouter une fenêtre pop-up, 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 d'affichage de la fenêtre 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 vous ancrez à un repère, la position de ce dernier est utilisée à la place.

Le contenu d'une fenêtre pop-up peut être personnalisé à l'aide de vues SwiftUI. Vous pouvez fournir des mises en page personnalisées en transmettant une fermeture de compilateur de vue à l'entité Popover ou au modificateur .popover.

Ajouter une fenêtre pop-up à un objet LatLngAltitude

L'exemple de code suivant ajoute une fenêtre pop-up à 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 une fenêtre pop-up à un repère

L'exemple de code suivant ajoute une fenêtre pop-up à 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()
        }
    }
  }
}