Pop-ups

Selecione a plataforma: Android iOS JavaScript

Mapa de São Francisco com marcador e popover sobre o Ferry Building.

Um popover mostra conteúdo (geralmente texto ou imagens) em uma janela de balão de informações acima do mapa, em um determinado local. O popover tem uma área de conteúdo e uma ponta afunilada. A extremidade da ponta fica conectada a uma localização especificada no mapa.

Normalmente, você anexa um popover a um marcador usando o modificador .popover, mas também é possível anexar um popover a uma coordenada LatLng específica com altitude ou deslocá-lo de um marcador.

Adicionar um popover

Para adicionar um popover, crie uma entidade Popover e defina as opções dela, incluindo posição e modo de altitude. A posição é um objeto LatLngAltitude, que determina onde o popover é exibido. É possível controlar como a altitude é interpretada ao ancorar por LatLngAltitude definindo o modo de altitude. Se você estiver ancorando em um marcador, a posição dele será usada.

O conteúdo de um popover pode ser personalizado usando as visualizações do SwiftUI. É possível fornecer layouts personalizados transmitindo um encerramento do criador de visualizações para a entidade Popover ou o modificador .popover.

Adicionar um popover a um objeto LatLngAltitude

O exemplo de código a seguir adiciona um popover a um 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")
      }
    }
  }
}

Adicionar um popover a um marcador

O exemplo de código a seguir adiciona um popover a um 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()
        }
    }
  }
}