Notificaciones emergentes

Selecciona la plataforma: Android iOS JavaScript

Mapa de San Francisco con un marcador y un cuadro 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 adjuntar un popover a una coordenada LatLng específica con modo de altitud , o bien desplazarlo desde un marcador.

Agrega 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 por 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 SwiftUI Views. Puedes proporcionar diseños personalizados pasando un cierre del compilador de View a la entidad Popover o al modificador .popover.

Agrega 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(center: .init(latitude: 37.8270, longitude: -122.4230)),
      mode: .hybrid) {
        Popover(
          positionAnchor: alcatraz,
          isOpen: $isOpen
        ) {
          Text("Alcatraz Island")
        }
      }
  }
}

Agrega 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(center: .init(latitude: 37.7955, longitude: -122.3937)),
      mode: .hybrid
    ) {
      Marker3D(position: ferryBuilding)
        .popover(isOpen: $isOpen) {
          Text("Ferry Building")
        }
        .onTap {
          isOpen.toggle()
        }
    }
  }
}