Popover

Seleziona la piattaforma: Android iOS JavaScript

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

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

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

Aggiungere un popover

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

Il contenuto di un popover può essere personalizzato 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 popover a un indicatore

Il seguente esempio di codice aggiunge un popover 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()
        }
    }
  }
}