Pop-ups

Selecione a plataforma: Android iOS JavaScript

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

Um pop-up mostra conteúdo (normalmente texto ou imagens) em uma janela de balão de informações acima do mapa, em um determinado local. O pop-up 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 pop-up a um marcador usando o .popover modificador, mas também é possível anexar um pop-up a uma coordenada LatLng específica com altitude ou deslocá-lo de um marcador.

Adicionar um pop-up

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

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

Adicionar um pop-up a um objeto LatLngAltitude

O exemplo de código a seguir adiciona um pop-up 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 pop-up a um marcador

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