请选择平台： Android iOS JavaScript

自定义样式设置

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

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

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

地点详情自定义选项

实例化 fragment 时，您可以指定一个主题来替换任何默认样式属性。未被覆盖的任何主题背景属性都使用默认样式。 

  <style name="CustomizedPlaceDetailsTheme" parent="PlacesMaterialTheme">
    <item name="placesColorPrimary">@color/app_primary_color</item>
    <item name="placesColorOnSurface">@color/app_color_on_surface</item>
    <item name="placesColorOnSurfaceVariant">@color/app_color_on_surface</item>
  
    <item name="placesTextAppearanceBodySmall">@style/app_text_appearence_small</item>
  
    <item name="placesCornerRadius">20dp</item>
  </style>

您可以自定义以下样式：

主题属性 用法
颜色
placesColorSurface 容器和对话框背景
placesColorOutlineDecorative 容器边框
placesColorPrimary 链接、加载指示器、概览图标
placesColorOnSurface 标题、对话框内容
placesColorOnSurfaceVariant 地点信息
placesColorSecondaryContainer 按钮背景
placesColorOnSecondaryContainer 按钮文字和图标
placesColorNeutralContainer 查看日期标记、加载占位符形状
placesColorOnNeutralContainer 审核日期，加载时出错
placesColorPositiveContainer “有电动汽车充电桩”徽章
placesColorOnPositiveContainer “有电动汽车充电桩”徽章内容
placesColorPositive 放置“营业中”标签
placesColorNegative “已关闭”地点现在会显示标签
placesColorInfo “无障碍入口”图标
placesColorButtonBorder “在地图中打开”按钮和“确定”按钮
   
排版
placesTextAppearanceBodySmall 地点信息
placesTextAppearanceBodyMedium 地点信息，对话框内容
placesTextAppearanceLabelMedium 徽章内容
placesTextAppearanceLabelLarge 按钮内容
placesTextAppearanceHeadlineMedium 对话框标题
placesTextAppearanceDisplaySmall 地点名称
placesTextAppearanceTitleSmall 地点名称
   
间距
placesSpacingExtraSmall
placesSpacingSmall
placesSpacingMedium
placesSpacingLarge
placesSpacingExtraLarge
placesSpacingTwoExtraLarge
   
效果衡量
placesBorderWidth Container
placesBorderWidthButton
   
形状
placesCornerRadius Container
placesCornerRadiusButton “在 Google 地图中打开”按钮和“确定”按钮（不包括圆形图标按钮）
placesCornerRadiusThumbnail 地点缩略图
placesCornerRadiusCollageOuter 媒体拼贴
placesCornerRadiusCard 地点卡片、用户评价卡片
placesCornerRadiusDialog Google 地图披露声明对话框
   
Google 地图品牌提供方信息
placesColorAttributionLightTheme 浅色主题 Google 地图署名和披露信息按钮（白色、灰色和黑色枚举）
placesColorAttributionDarkTheme 深色主题 Google 地图署名和披露信息按钮（白色、灰色和黑色枚举）

归因颜色

归因
提供方信息

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

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

  • 浅色主题：placesColorAttributionLight，包含白色、灰色和黑色的枚举值。
  • 深色主题：placesColorAttributionDark，具有白色、灰色和黑色枚举值。

示例

此代码示例展示了如何创建替换默认样式属性的主题。未被覆盖的任何主题背景属性都使用默认样式。 
  <style name="CustomizedPlaceDetailsTheme" parent="PlacesMaterialTheme">
    <item name="placesColorPrimary">@color/app_primary_color</item>
    <item name="placesColorOnSurface">@color/app_color_on_surface</item>
    <item name="placesColorOnSurfaceVariant">@color/app_color_on_surface</item>
  
    <item name="placesTextAppearanceBodySmall">@style/app_text_appearence_small</item>
  
    <item name="placesCornerRadius">20dp</item>
  </style>

每个组件的完整示例