弹出式窗口

请选择平台: Android iOS JavaScript

旧金山地图,渡轮大厦上有标记和弹出式窗口。

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

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

添加弹出式窗口

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

可以使用 SwiftUI 视图自定义弹出框的内容。您可以将视图构建器闭包传递给 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()
        }
    }
  }
}