Place Details 元件

Places UI Kit 的 Place Details 元件可讓您新增個別 UI 元件，在應用程式中顯示地點詳細資料。

PlaceDetailsCompactView 會以最少的空間算繪所選地點的詳細資料。這項功能可用於資訊視窗，用於在地圖上醒目顯示地點，在社群媒體體驗中 (例如在即時通訊中分享地點) 提供建議，或在媒體文章中參照 Google 地圖上的地點。PlaceDetailsCompactView 可顯示名稱、地址、評分、類型、價格、無障礙圖示、營業狀態，以及單張相片。

您可以單獨使用 Place Details 元件，也可以搭配其他 Google 地圖平台 API 和服務使用。此元件會接收 Place ID 或經緯度座標，並傳回算繪的 Place Details 資訊。

Place Details 元件提供精簡檢視畫面，可橫向或直向顯示。

您可以根據用途和品牌視覺規範，設定 Place Details 元件的內容和視覺樣式。您可以提供自訂 PlacesMaterialTheme 值，自訂地點詳細資料的外觀。您也可以指定 PlaceDetailsCompactView 項目清單，自訂要納入哪些地點詳細資料欄位，每個項目都會對應至顯示的地點資訊。

帳單

使用 Place Details UI Kit 時，每次呼叫 PlaceDetailsQuery 方法都會產生費用。如果您多次載入相同地點，系統會針對每項要求向您收費。

在應用程式中新增地點詳細資料

Place Details 元件是 Swift UI 檢視區塊。您可以根據需求自訂地點詳細資料資訊的外觀和風格，以便與應用程式外觀相符。

您可以指定方向 (水平或垂直)、主題覆寫值和內容。內容選項包括媒體、地址、評分、價格、類型、無障礙入口、地圖連結和路線連結。進一步瞭解自訂功能。

預設位置為直向，如果您想要使用橫向版面配置，請在 PlaceDetailsCompactView 中指定 orientation: .horizontal。

這個範例會建立使用垂直版面配置的簡潔檢視畫面。

Swift

      
  // Callback for the place details widget.
  let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
    if let place = result.place {
      print("Place: \(place.description)")
    } else {
      print("Error: \(String(describing: result.error))")
    }
  }
  
  @Environment(\.colorScheme) var colorScheme
  
  var customTheme = false
  var theme: PlacesMaterialTheme {
    if customTheme {
      var theme = PlacesMaterialTheme()
      var color = PlacesMaterialColor()
      color.surface = (colorScheme == .dark ? .blue : .gray)
      color.outlineDecorative = (colorScheme == .dark ? .white : .black)
      color.onSurface = (colorScheme == .dark ? .yellow : .red)
      color.onSurfaceVariant = (colorScheme == .dark ? .white : .blue)
      color.onSecondaryContainer = (colorScheme == .dark ? .white : .red)
      color.secondaryContainer = (colorScheme == .dark ? .green : .purple)
      color.positive = (colorScheme == .dark ? .yellow : .red)
      color.primary = (colorScheme == .dark ? .yellow : .purple)
      color.info = (colorScheme == .dark ? .yellow : .purple)
      var shape = PlacesMaterialShape()
      shape.cornerRadius = 10
      var font = PlacesMaterialFont()
      font.labelLarge = .system(size: UIFontMetrics.default.scaledValue(for: 18))
      font.headlineMedium = .system(size: UIFontMetrics.default.scaledValue(for: 15))
      font.bodyLarge = .system(size: UIFontMetrics.default.scaledValue(for: 15))
      font.bodyMedium = .system(size: UIFontMetrics.default.scaledValue(for: 12))
      font.bodySmall = .system(size: UIFontMetrics.default.scaledValue(for: 11))
      var attribution = PlacesMaterialAttribution()
      attribution.lightModeColor = .black
      attribution.darkModeColor = .white
      theme.color = color
      theme.shape = shape
      theme.font = font
      theme.attribution = attribution
    } else {
      return PlacesMaterialTheme()
    }
  }
  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price(), .accessibleEntranceIcon(), .openNowStatus()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }

  

這個範例會建立使用水平版面配置的簡潔檢視畫面。

Swift

  // Callback for the place details widget.
  let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
    if let place = result.place {
      print("Place: \(place.description)")
    } else {
      print("Error: \(String(describing: result.error))")
    }
  }
  
  @Environment(\.colorScheme) var colorScheme
  
  var customTheme = false
  var theme: PlacesMaterialTheme {
    if customTheme {
      var theme = PlacesMaterialTheme()
      var color = PlacesMaterialColor()
      color.surface = (colorScheme == .dark ? .blue : .gray)
      color.outlineDecorative = (colorScheme == .dark ? .white : .black)
      color.onSurface = (colorScheme == .dark ? .yellow : .red)
      color.onSurfaceVariant = (colorScheme == .dark ? .white : .blue)
      color.onSecondaryContainer = (colorScheme == .dark ? .white : .red)
      color.secondaryContainer = (colorScheme == .dark ? .green : .purple)
      color.positive = (colorScheme == .dark ? .yellow : .red)
      color.primary = (colorScheme == .dark ? .yellow : .purple)
      color.info = (colorScheme == .dark ? .yellow : .purple)
      var shape = PlacesMaterialShape()
      shape.cornerRadius = 10
      var font = PlacesMaterialFont()
      font.labelLarge = .system(size: UIFontMetrics.default.scaledValue(for: 18))
      font.headlineMedium = .system(size: UIFontMetrics.default.scaledValue(for: 15))
      font.bodyLarge = .system(size: UIFontMetrics.default.scaledValue(for: 15))
      font.bodyMedium = .system(size: UIFontMetrics.default.scaledValue(for: 12))
      font.bodySmall = .system(size: UIFontMetrics.default.scaledValue(for: 11))
      var attribution = PlacesMaterialAttribution()
      attribution.lightModeColor = .black
      attribution.darkModeColor = .white
      theme.color = color
      theme.shape = shape
      theme.font = font
      theme.attribution = attribution
    } else {
      return PlacesMaterialTheme()
    }
  }
  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .horizontal, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price(), .accessibleEntranceIcon(), .mapsLink(), .directionsLink()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }

自訂地點詳細資料

Places UI 套件提供設計系統方法，可根據 Material Design 進行視覺自訂 (並進行一些 Google 地圖專屬修改)。請參閱 Material Design 的色彩和字體排版參考資料。根據預設，樣式會遵循 Google 地圖的視覺設計語言。

重要事項： 進行視覺修改時，請務必遵守 Google 地圖歸屬規定。

您可以自訂下列樣式：

寬度和高度

對於垂直視圖，建議寬度介於 180 像素和 300 像素之間。對於橫向檢視畫面，建議寬度介於 180 像素至 500 像素之間。

最佳做法是不設定高度。這樣一來，視窗中的內容就能設定高度，讓所有資訊都能顯示。

注意：如果檢視畫面寬度小於 350 像素，就不會顯示地點縮圖。

歸因顏色

根據《Google 地圖服務條款》，您必須使用 Google 地圖歸屬資訊的三種品牌顏色之一。在自訂設定變更後，系統必須顯示並提供這項歸因資訊。

我們提供 3 種品牌顏色供您選擇，可分別設定為淺色和深色主題：

• 淺色主題：attributionColorLight，其中包含白色、灰色和黑色的列舉。
• 深色主題：attributionColorDark，其中包含白色、灰色和黑色的列舉。

自訂範例

注意：如果您未指定視覺化自訂設定，系統會保留預設值。

本範例說明如何自訂預設樣式屬性。

Swift

  // Callback for the place details widget.
  let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
    if let place = result.place {
      print("Place: \(place.description)")
    } else {
      print("Error: \(String(describing: result.error))")
    }
  }
  
  @Environment(\.colorScheme) var colorScheme
  
  var theme: PlacesMaterialTheme {
      var theme = PlacesMaterialTheme()
      theme.colorSurface = (colorScheme == .dark ? .blue : .gray)
      theme.colorOutlineDecorative = (colorScheme == .dark ? .white : .black)
      theme.colorPrimary = (colorScheme == .dark ? .white : .black)
      theme.colorOnSurface = (colorScheme == .dark ? .yellow : .red)
      theme.colorOnSurfaceVariant = (colorScheme == .dark ? .white : .blue)
      theme.colorOnSecondaryContainer = (colorScheme == .dark ? .white : .red)
      theme.colorSecondaryContainer = (colorScheme == .dark ? .green : .purple)
      theme.colorPositive = (colorScheme == .dark ? .yellow : .red)
      theme.colorNegative = (colorScheme == .dark ? .white : .black)
      theme.colorInfo = (colorScheme == .dark ? .yellow : .purple)
      theme.cornerRadius = 10
      theme.bodySmall = .system(size: 11)
      theme.bodyMedium = .system(size: 12)
      theme.labelLarge = .system(size: 13)
      theme.headlineMedium = .system(size: 14)
      theme.attributionColorLightTheme = .black
      theme.attributionColorDarkTheme = .white
      return theme
  }
  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price(), .accessibleEntranceIcon(), .mapsLink(), .directionsLink()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }