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 burbuja de información que aparece sobre el mapa, en una ubicación determinada. El objeto 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 objeto popover a un marcador con el .popover modificador, pero también puedes adjuntarlo a una coordenada LatLng específica con altitud o desplazarlo desde un marcador.

Cómo agregar un objeto popover

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

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

Cómo agregar un objeto popover a un objeto LatLngAltitude

En el siguiente ejemplo de código, se agrega un objeto 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 objeto popover a un marcador

En el siguiente ejemplo de código, se agrega un objeto 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()
        }
    }
  }
}