Notificaciones emergentes

Selecciona la plataforma: Android iOS JavaScript

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

Un elemento emergente muestra contenido (por lo general, texto o imágenes) en una ventana de burbuja de información sobre el mapa, en una ubicación determinada. La ventana emergente tiene un área de contenido y un vástago cónico. La punta del tallo se conecta a una ubicación específica en el mapa.

Por lo general, adjuntarás una ventana emergente a un marcador con el modificador .popover, pero también puedes adjuntar una ventana emergente a una coordenada LatLng específica con altitud o desplazarla desde un marcador.

Cómo agregar una ventana emergente

Para agregar una ventana emergente, 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 la ventana emergente. Puedes controlar cómo se interpreta la altitud cuando se ancla por LatLngAltitude configurando el modo de altitud. Si se ancla a un marcador, se usa la posición del marcador.

El contenido de una ventana emergente se puede personalizar con vistas de SwiftUI. Puedes proporcionar diseños personalizados pasando un cierre del compilador de View a la entidad Popover o al modificador .popover.

Agrega una ventana emergente a un objeto LatLngAltitude

En la siguiente muestra de código, se agrega una ventana emergente 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 una ventana emergente a un marcador

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