Popover

Seleziona la piattaforma: Android iOS JavaScript

Mappa di San Francisco con indicatore e popup sopra il Ferry Building.

Un popup mostra contenuti (in genere testo o immagini) in una finestra a forma di fumetto informativa sopra la mappa, in una determinata posizione. Il popup ha un'area di contenuti e un gambo affusolato. La punta del gambo è collegata a una posizione specificata sulla mappa.

In genere, un popup viene collegato a un indicatore utilizzando il .popover modificatore, ma puoi anche collegarlo a una LatLng coordinata specifica con altitudine o spostarlo da un indicatore.

Aggiungere un popup

Per aggiungere un popup, crea un'entità Popover e imposta le relative opzioni, inclusi la posizione e la modalità di altitudine. La posizione è un oggetto LatLngAltitude, che determina dove viene visualizzato il popup. Puoi controllare come viene interpretata l'altitudine quando ancori per LatLngAltitude impostando la modalità di altitudine. Se ancori a un indicatore, viene utilizzata la posizione dell'indicatore.

I contenuti di un popup possono essere personalizzati utilizzando le visualizzazioni SwiftUI. Puoi fornire layout personalizzati passando una chiusura del generatore di visualizzazioni all'entità Popover o al modificatore .popover.

Aggiungere un popup a un oggetto LatLngAltitude

Il seguente esempio di codice aggiunge un popup a un oggetto 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")
      }
    }
  }
}

Aggiungere un popup a un indicatore

Il seguente esempio di codice aggiunge un popup a un indicatore:

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()
        }
    }
  }
}