请选择平台： Android iOS JavaScript

“地点详情”组件

Places 界面套件的地点详情组件可让您添加一个用于在应用中显示地点详情的界面组件。此组件可自定义。

地点详情紧凑型组件

地点详情组件可以单独使用，也可以与其他 Google Maps Platform API 和服务搭配使用。该组件接受地点 ID、资源名称或纬度/经度坐标，并返回呈现的地点详情信息。

地点详情组件完全可设置主题，让您可以自定义字体、颜色和圆角半径，以符合您的使用情形和视觉品牌推广指南。您可以通过提供自定义 PlacesMaterialTheme 值来自定义地点详情的外观。您还可以通过指定 PlaceDetailsCompactView 条目的列表来自定义要包含哪些地点详情字段，每个条目都对应于显示的地点信息。

布局变体

Place Details 组件支持两种主要布局变体：

  • 紧凑：用于预览关键信息的布局。
  • 完整：一种全面的布局，可显示所有可用的地点详细信息。

紧凑型布局可以采用垂直或水平方向显示。这样一来，您就可以将该组件集成到各种设计布局和屏幕尺寸中。完整布局只能以竖屏模式显示。

横向和纵向布局
横向布局和竖向布局

借助“地点详情”组件，您可以精细控制组件中显示的内容。每个元素（例如照片、评价和联系信息）都可以单独显示或隐藏，从而实现对组件外观和信息密度的精细自定义。

地点详情内容选项
内容显示选项

地点详情精简视图

地点详情紧凑视图 (PlaceDetailsCompactView) 使用最少的空间呈现所选地点的详情。这在以下情况下可能很有用：在突出显示地图上某个地点的信息窗口中；在社交媒体体验中（例如在聊天中分享位置信息）；作为选择当前位置的建议；或在媒体文章中引用 Google 地图上的某个地点。

“地点详情”完整视图

地点详情全视图 (PlaceDetailsView) 可提供更大的界面来显示地点详情信息，并让您显示更多类型的信息。

内容显示选项

您可以使用 PlaceDetailsCompactContent 或 PlaceDetailsContent 中的枚举指定要显示的内容。

精简视图 全本阅读
  • 地点照片
  • 地点地址
  • 评分和评分数量
  • 地点类型
  • 价格
  • 无障碍入口信息
  • “营业中”状态
  • 放置照片拼贴
  • 地点地址
  • 评分和评分数量
  • 地点类型
  • 价格
  • 无障碍服务信息
  • “营业中”状态
  • 营业时间
  • 编辑摘要
  • 网站
  • 电话号码
  • 在专用标签页中呈现的评价
  • Plus Code
  • 在专用标签页中呈现的功能列表
  • 特定类型地点的突出显示信息，例如加油站的油价

结算

使用地点详情界面套件时，每次调用 PlaceDetailsQuery 方法都需要付费。如果您多次加载同一地点，则需要为每次请求付费。

向应用添加地点详情

“地点详情”组件是一个 Swift 界面视图。您可以自定义地点详情信息的外观和风格，以满足您的需求并与应用的外观相匹配。详细了解自定义。

您可以选择使用地点 ID、资源名称或纬度/经度坐标加载地点详情组件。您可以选择任意一种或多种方法。将 PlaceDetailsQuery 结构体中的 identifier 设置为 .placeID、.resourceName 或 .coordinate。

紧凑视图的默认位置为竖屏。如果您想要横向布局，请在 PlaceDetailsCompactView 中指定 orientation: .horizontal。您还可以选择指定 orientation: .vertical 以提高清晰度。全屏视图只能以竖屏模式显示。

请参阅地点详情组件示例部分中的示例。

自定义视觉效果

地点详情视觉自定义
可视化自定义示例

Places 界面套件提供了一种设计系统方法，用于进行视觉自定义，大致基于 Material Design（进行了一些 Google 地图特有的修改）。请参阅 Material Design 的颜色和排版参考。默认情况下，样式遵循 Google 地图视觉设计语言。

地点详情自定义选项

使用 placesMaterialColor、placesMaterialFont、placesMaterialShape 和 placesMaterialTheme 结构体自定义组件的外观和风格。

您可以自定义以下样式：

对话框颜色和字体排版自定义
对话框颜色和排版自定义
主题属性 用法
颜色
theme.color.surface 容器和对话框背景
theme.color.outlineDecorative 容器边框
theme.color.primary 链接、加载指示器、概览图标
theme.color.onSurface 标题、对话框内容
theme.color.onSurfaceVariant 地点信息
theme.color.secondaryContainer 按钮背景
theme.color.onSecondaryContainer 按钮文字和图标
theme.color.neutralContainer 查看日期标记、加载占位符形状
theme.color.onNeutralContainer 查看日期，加载时出错
theme.color.positiveContainer “有电动汽车充电桩”徽章
theme.color.onPositiveContainer “有电动汽车充电桩”徽章内容
theme.color.positive 放置“营业中”标签
theme.color.negative “已关闭”地点标签
theme.color.info “无障碍入口”图标
theme.measurement.borderWidthButton “在地图中打开”按钮和“确定”按钮
   
排版
theme.font.bodySmall 地点信息
theme.font.bodyMedium 地点信息，对话框内容
theme.font.labelMedium 徽章内容
theme.font.labelLarge 按钮内容
theme.font.headlineMedium 对话框标题
theme.font.displaySmall 地点名称
theme.font.titleSmall 地点名称
   
间距
theme.measurement.spacingExtraSmall
theme.measurement.spacingSmall
theme.measurement.spacingMedium
theme.measurement.spacinglarge
theme.measurement.spacingExtraLarge
theme.measurement.spacingTwoExtraLarge
   
效果衡量
borderWidth Container
theme.measurement.borderWidthButton
   
形状
theme.shape.cornerRadius Container
theme.shape.cornerRadiusButton “在 Google 地图中打开”按钮和“确定”按钮（圆形图标按钮除外）
theme.shape.cornerRadiusThumbnail 地点缩略图
theme.shape.cornerRadiusCollageOuter 媒体拼图
theme.shape.cornerRadiusCard 地点卡片、用户评价卡片
theme.shape.cornerRadiusDialog Google 地图披露声明对话框
   
Google 地图品牌提供方信息
attribution.lightModeColor 浅色主题 Google 地图署名和披露信息按钮（白色、灰色和黑色枚举）
attribution.darkModeColor 深色主题 Google 地图署名和披露信息按钮（白色、灰色和黑色枚举）

请参阅地点详情组件示例部分中的示例。

宽度和高度自定义

紧凑视图

建议的宽度：

  • 竖屏方向：介于 180 像素和 300 像素之间。
  • 横向：介于 180 像素和 500 像素之间。

最佳实践是不为紧凑型视图设置高度。这样一来，窗口中的内容就可以设置高度，从而显示所有信息。

宽度小于 160 像素的广告可能无法正确显示。

完整观看次数

对于完整视图，建议宽度介于 250 像素和 450 像素之间。宽度小于 250 像素的图片可能无法正确显示。

您可以设置组件的高度：垂直地点详情视图将在分配的空间内垂直滚动。

最佳做法是为全屏视图设置高度。这样，窗口中的内容就可以正常滚动了。

归因颜色

归因
提供方信息

《Google 地图服务条款》要求您使用三种品牌颜色之一来注明 Google 地图的版权归属信息。在进行自定义更改后，此提供方信息必须可见且可访问。

我们提供 3 种品牌颜色供您选择，这些颜色可以针对浅色主题和深色主题分别设置：

  • 浅色主题：attributionColorLight，包含白色、灰色和黑色枚举。
  • 深色主题：attributionColorDark，包含白色、灰色和黑色的枚举。

“地点详情”组件示例

创建采用垂直布局的全视图

Swift

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    // Query for loading the place details widget.
    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme = PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // 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))")
      }
    }
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      configuration: configuration,
      placeDetailsCallback: placeDetailsCallback
    )

创建采用水平布局的紧凑视图

Swift

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    // Query for loading the place details widget.
    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme = PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // 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))")
      }
    }
    PlaceDetailsCompactView(
      orientation: .horizontal, query: $query,
      configuration: configuration,
      placeDetailsCallback: placeDetailsCallback
    )

创建采用垂直布局的全视图

Swift

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  var theme: PlacesMaterialTheme = PlacesMaterialTheme()
  var selectedType: Set<PlaceDetailsContent> = PlaceDetailsCompactView.standardContent
  
  var configuration: PlaceDetailsConfiguration {
    PlaceDetailsConfiguration(
      content: selectedType,
      theme: theme)
  }
  let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
    placeIDPickerFocused = true
    if let place = result.place {
      print("Place: \(place.description)")
    } else {
      print("Error: \(String(describing: result.error))")
    }
  }
  GooglePlacesSwift.PlaceDetailsView(
    query: $query,
    configuration: configuration,
    placeDetailsCallback: placeDetailsCallback
  )

自定义样式属性

此示例展示了如何自定义完整视图或精简视图的默认样式属性。

Swift

  // Same for compact and full
func makeTemplateTheme(colorScheme: ColorScheme) -> PlacesMaterialTheme {
  var theme = PlacesMaterialTheme()
  var color = PlacesMaterialColor()
  color.surface = (colorScheme == .dark ? .blue : .gray)
  color.buttonBorder = (colorScheme == .dark ? .pink : .orange)
  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.measurement.borderWidthButton = 1
  theme.color = color
  theme.shape = shape
  theme.font = font
  theme.attribution = attribution
  return theme
}

显示特定内容

此示例使用上一个示例中创建的主题，创建一个仅显示媒体、地址、评分和类型的紧凑型视图。

Swift

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }