彈出式視窗

選取平台： Android iOS JavaScript

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

一般來說，您會使用 .popover 修飾符將彈出式視窗附加至標記，但也可以使用高度模式將彈出式視窗附加至特定 LatLng 座標，或從標記偏移。

新增彈出式視窗

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

您可以使用 SwiftUI 檢視畫面自訂彈出式視窗的內容。您可以將 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(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()
        }
    }
  }
}