请选择平台: Android iOS JavaScript

自定义样式设置

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

您可以自定义以下 Places 界面套件组件的颜色、排版、间距、边框和边角:

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

地点详情自定义选项

使用 placesMaterialColorplacesMaterialFontplacesMaterialShapeplacesMaterialTheme 结构体自定义组件的外观和风格。

您可以自定义以下样式:

主题属性 用法
颜色
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 地图署名和披露信息按钮(白色、灰色和黑色枚举)

归因颜色

归因
提供方信息

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

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

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

示例

此函数会创建一个主题,用于替换默认样式属性。未被覆盖的任何主题背景属性都使用默认样式。

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
}

每个组件的完整示例