彈出式視窗

選取平台： Android iOS JavaScript

舊金山地圖，渡輪大廈上方有標記和快顯視窗。

彈出式視窗會在特定位置的地圖上方，以資訊泡泡視窗顯示內容 (通常為文字或圖片)。彈出式視窗是由一個內容區域和一個錐形柄所組成，錐形柄的尖端會連接地圖上的指定位置。

通常您會使用 .popover 修飾符將彈出式視窗附加至標記，但您也可以將彈出式視窗附加至特定 LatLng 座標 (含海拔高度)，或從標記偏移。

新增彈出式視窗

如要新增快顯視窗，請建立 Popover 實體並設定選項，包括位置和海拔模式。位置是 LatLngAltitude 物件，決定顯示快顯視窗的位置。您可以設定海拔高度模式，控制錨定時的海拔高度解讀方式。LatLngAltitude如要錨定至標記，則會改用標記位置。

您可以使用 SwiftUI Views 自訂彈出視窗的內容。您可以將 View 建構函式閉包傳遞至 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()
        }
    }
  }
}