Поповеры

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

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

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

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

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

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

Содержимое всплывающего окна можно настроить с помощью представлений SwiftUI. Вы можете задать пользовательские макеты, передав замыкание 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(latitude: 37.8270, longitude: -122.4230)) {
      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(latitude: 37.7955, longitude: -122.3937)) {
      Marker(position: ferryBuilding)
        .popover(isOpen: $isOpen) {
          Text("Ferry Building")
        }
        .onTap {
          isOpen.toggle()
        }
    }
  }
}