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 oknie 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 markera za pomocą modyfikatora .popover, ale możesz też przyczepić je do określonych LatLng współrzędnych z wysokością lub przesunąć je względem markera.

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 za pomocą LatLngAltitude, ustawiając tryb wysokości. Jeśli punkt jest zakotwiczony do znacznika, zamiast niego 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 narzędzia do tworzenia widoków 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()
        }
    }
  }
}