Wyskakujące okienka

Wybierz platformę: Android iOS JavaScript

Mapa San Francisco ze znacznikiem i okienkiem nad 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 je też dołączyć do określonych LatLng współrzędnych z trybem wysokości , lub przesunąć względem znacznika.

Dodawanie wyskakującego okienka

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

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