Wyskakujące okienka

Wybierz platformę: Android iOS JavaScript

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

Wyskakujące okienko wyświetla treści (zwykle tekst lub obrazy) w dymku informacyjnym nad mapą w określonej lokalizacji. Wyskakujące okienko ma obszar treści i zwężającą się nóżkę. Koniec ramienia jest przymocowany do określonego miejsca na mapie.

Zazwyczaj przyczepiasz wyskakujące okienko do znacznika za pomocą modyfikatora .popover, ale możesz też przyczepić je do określonych współrzędnych LatLng z wysokością lub przesunąć je względem znacznika.

Dodawanie wyskakującego okienka

Aby dodać wyskakujące okienko, utwórz obiekt Popover i skonfiguruj jego 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ć sposób interpretacji wysokości podczas kotwiczenia, ustawiając tryb wysokości.LatLngAltitude Jeśli kotwiczenie jest powiązane ze znacznikiem, zamiast tego używana jest pozycja znacznika.

Treść wyskakującego okienka można dostosować za pomocą widoków SwiftUI. Możesz udostępniać niestandardowe układy, przekazując zamknięcie konstruktora widoku do elementu 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

Poniższy 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()
        }
    }
  }
}