Notificaciones emergentes

Selecciona la plataforma: Android iOS JavaScript

Mapa de San Francisco con un marcador y una ventana emergente sobre el Ferry Building.

Un objeto popover muestra contenido (por lo general, texto o imágenes) en una ventana de globo de información que aparece sobre el mapa, en una ubicación determinada. El popover tiene un área de contenido y un tallo cónico. La punta del tallo se conecta a una ubicación específica en el mapa.

Por lo general, adjuntarás un popover a un marcador con el .popover modificador, pero también puedes adjuntarlo a una coordenada LatLng específica con modo de altitud , o bien compensarlo desde un marcador.

Cómo agregar un popover

Para agregar un popover, crea una entidad Popover y establece sus opciones, incluido el modo de posición y altitud. La posición es un objeto LatLngAltitude que determina dónde se muestra el popover. Puedes controlar cómo se interpreta la altitud cuando se ancla con LatLngAltitude configurando el modo de altitud. Si se ancla a un marcador, se usa la posición del marcador.

El contenido de un popover se puede personalizar con las vistas de SwiftUI. Para proporcionar diseños personalizados, pasa un cierre del compilador de View a la entidad Popover o al modificador .popover.

Cómo agregar un popover a un objeto LatLngAltitude

En la siguiente muestra de código, se agrega un popover a un objeto 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")
      }
    }
  }
}

Cómo agregar un popover a un marcador

En la siguiente muestra de código, se agrega un popover a un marcador:

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