Wyskakujące okienka

Wybierz platformę: Android iOS JavaScript

Mapa San Francisco ze znacznikiem i wyskakującym okienkiem nad budynkiem Ferry Building.

Wyskakujące okienko wyświetla treści (zwykle tekst lub obrazy) w dymku informacyjnym nad mapą w danej lokalizacji. Wyskakujące okienko ma obszar treści i zwężający się trzonek. Koniec trzonka jest przymocowany do określonej lokalizacji na mapie.

Zwykle wyskakujące okienko jest dołączane do znacznika za pomocą .popover modyfikatora, ale można też dołączyć je do określonych LatLng współrzędnych z wysokością lub przesunąć je względem znacznika.

Dodawanie wyskakującego okienka

Aby dodać wyskakujące okienko, utwórz encję Popover i ustaw jej opcje, w tym tryb pozycji i wysokości. Pozycja to obiekt LatLngAltitude, który określa, gdzie ma się wyświetlać wyskakujące okienko. Możesz określić, jak wysokość jest interpretowana podczas zakotwiczania przez LatLngAltitude, ustawiając tryb wysokości. Jeśli zakotwiczasz do znacznika, zamiast tego używana jest pozycja znacznika.

Treść wyskakującego okienka można dostosować za pomocą widoków SwiftUI. Możesz podać niestandardowe układy, przekazując zamknięcie konstruktora widoków do encji Popover lub modyfikatora .popover.

Dodawanie wyskakującego okienka do obiektu LatLngAltitude

Ten przykładowy kod dodaje wyskakujące okienko do obiektu 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")
      }
    }
  }
}

Dodawanie wyskakującego okienka do znacznika

Ten przykładowy kod dodaje wyskakujące okienko do znacznika:

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()
        }
    }
  }
}