Всплывающие окна

Выберите платформу: Android iOS JavaScript

Карта Сан-Франциско с маркером и всплывающим окном над зданием паромного терминала.

Всплывающее окно служит для отображения текстового или графического содержания в информационном окне, которое открывается поверх карты в указанном местоположении. Всплывающее окно состоит из области контента и заостренного указателя. Конец указателя прикреплен к указанному местоположению на карте.

Обычно всплывающее окно прикрепляется к маркеру с помощью модификатора .popover, но его также можно прикрепить к определенной координате LatLng с режимом высоты или сместить относительно маркера.

Как добавить всплывающее окно

Чтобы добавить всплывающее окно, создайте объект Popover и задайте его параметры, включая положение и режим высоты. Позиция – это объект LatLngAltitude, определяющий, где будет показано всплывающее окно. Вы можете управлять тем, как интерпретируется высота при привязке с помощью LatLngAltitude, задав режим высоты. Если окно привязано к маркеру, используется положение маркера.

Контент всплывающего окна можно настроить с помощью SwiftUI Views. Вы можете предоставить собственные макеты, передав замыкание View builder объекту Popover или модификатору .popover.

Как добавить всплывающее окно к объекту LatLngAltitude

В следующем примере кода всплывающее окно добавляется к объекту 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")
        }
      }
  }
}

Как добавить всплывающее окно к маркеру

В следующем примере кода показано, как добавить всплывающее окно к маркеру:

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