弹出式窗口

弹出式窗口用于在地图上指定位置处的提示气泡窗口中显示内容（通常为文本或图像）。弹出式窗口包含一个内容区域和一个锥形柄， 柄的尖端与地图上的指定位置相连。

通常，您可以使用 标记使用.popover 修饰符将弹出式窗口附加到标记，但您也可以使用海拔模式将弹出式窗口附加到特定的LatLng坐标 ，或者将其从 标记中偏移。

添加弹出式窗口

如需添加弹出式窗口，请创建一个 Popover 实体并设置其选项，包括位置和海拔模式。位置是一个 LatLngAltitude 对象，用于确定弹出式窗口的显示位置。您可以通过设置海拔模式来控制在通过 LatLngAltitude 进行锚定时如何解读海拔。如果锚定到标记，则改用标记的位置。

可以使用 SwiftUI 视图自定义弹出式窗口的内容。您可以通过向 Popover 实体或 .popover 修饰符传递 View 构建器闭包来提供自定义布局。

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