高级地点详情元素和高级地点详情紧凑型 元素是 HTML 元素，用于呈现地点的详细信息：
-
AdvancedPlaceDetailsElement支持所有 可直观呈现的地点数据，并且可能包含多张照片。 -
AdvancedPlaceDetailsCompactElement旨在占用最少的空间，并显示有关地点的简洁信息集， 包括名称、地址、评分等。它还可能包含一张照片。
高级地点详情元素和高级地点详情紧凑型 元素都提供相同的高级功能， 包括自定义操作按钮、省略地点名称以及 过滤评价和媒体内容。
使用 自定义工具 直观呈现不同属性集对地点详情元素外观的影响，并以 HTML/CSS、Kotlin/XML、 和 Swift 访问代码。
高级地点详情元素（预览版）
点击地图上的标记，即可在高级地点 详情元素 中查看其地点详情。
AdvancedPlaceDetailsElement
支持各种内容元素，包括完整营业时间、
网站、电话号码、
AI 驱动的摘要
（回退到编辑摘要）、特定类型的重要信息、评价、
AI 驱动的评价摘要，以及代码和功能列表。
如需在地图上显示地点详情，请将
gmp-advanced-place-details 元素添加到 HTML 页面上的
gmp-map 元素。添加子元素
gmp-place-details-place-request 以选择地点。这
可以是
地点对象、
地点 ID或地点的资源名称：
<gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
<div class="widget-container" slot="control-inline-start-block-start">
<gmp-advanced-place-details>
<gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
<gmp-place-all-content></gmp-place-all-content>
</gmp-advanced-place-details>
</div>
<gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>配置内容
您可以控制
gmp-advanced-place-details 元素显示的特定地点内容，方法是嵌套子元素
以选择和配置地点详情，如以下示例所示：
<gmp-advanced-place-details>
<gmp-place-details-place-request
place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
<gmp-place-name></gmp-place-name>
<gmp-place-address></gmp-place-address>
<gmp-place-rating></gmp-place-rating>
<gmp-place-type></gmp-place-type>
<gmp-place-price></gmp-place-price>
<gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
<gmp-place-opening-hours></gmp-place-opening-hours>
<gmp-place-website></gmp-place-website>
<gmp-place-phone-number></gmp-place-phone-number>
<gmp-place-summary></gmp-place-summary>
<gmp-place-type-specific-highlights></gmp-place-type-specific-highlights>
<gmp-place-review-summary></gmp-place-review-summary>
<gmp-place-reviews></gmp-place-reviews>
<gmp-place-feature-list></gmp-place-feature-list>
<gmp-place-attribution></gmp-place-attribution>
</gmp-advanced-place-details>
每个子内容元素都会选择要显示的相应地点详情：gmp-place-address 选择地点的地址，gmp-place-price 选择地点的价格水平，依此类推。元素gmp-place-summary 和gmp-place-review-summary 分别提供地点及其评价的AI 驱动的摘要。子元素的顺序无关紧要，因为所选详情始终以固定的预定义顺序呈现。
您可以使用特定于内容的 属性进一步配置其中一些元素：
-
gmp-place-media元素用于显示单张照片，并包含一个lightbox-preferred属性，该属性会在点击照片时在灯箱中打开照片。默认情况下，灯箱处于停用状态。 -
gmp-place-attribution元素用于显示地图 API 的总体数据归因 配置，例如照片或评价的来源。light-scheme-color和dark-scheme-color属性用于在浅色模式和深色模式下设置 归因文本的颜色。
如需详细了解所有受支持的内容元素，请参阅 地点 widget 内容自定义 参考文档。
为简单起见，您还可以使用
gmp-place-all-content
显示高级地点详情元素中提供的所有详情，或
使用
gmp-place-standard-content
显示标准配置。
配置外观
gmp-advanced-place-details 元素的建议宽度范围为 250 像素到 400 像素。宽度小于
250 像素时，可能无法正确显示。请根据您的
应用设置高度。高级地点详情元素旨在根据需要在分配的空间内滚动。
gmp-advanced-place-details 元素还支持各种自定义 CSS 属性，用于配置元素的颜色和字体。如需了解详情，请参阅
Places UI Kit 自定义样式
。
高级地点详情紧凑型元素（预览版）
点击地图上的标记，即可在高级地点 详情紧凑型元素中查看其地点详情。
AdvancedPlaceDetailsCompactElement
使用最少的空间呈现所选地点的详细信息。这在以下情况下可能很有用：在信息窗口中突出显示地图上的地点；在社交媒体
体验中（例如在聊天中分享位置）；作为选择当前位置的建议；或在媒体文章中引用 Google 地图上的地点。
AdvancedPlaceDetailsCompactElement 可以显示名称、地址、
评分、类型、价格、无障碍图标、营业状态和单张照片。
它可以水平或垂直显示，具体取决于
orientation 属性的选择。
在以下代码段中，
gmp-advanced-place-details-compact 配置为
orientation 设置为 horizontal。另一个
属性，truncation-preferred会截断某些内容，使其适合在一行中显示，而不是换行。
gmp-advanced-place-details-compact 元素包含一个子元素 gmp-place-details-place-request，用于选择地点。
这可以是
地点对象、
地点 ID或地点的资源名称。
<gmp-advanced-place-details-compact orientation="horizontal" truncation-preferred>
<gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
<gmp-place-all-content></gmp-place-all-content>
</gmp-advanced-place-details-compact>配置内容
您可以控制
gmp-advanced-place-details-compact 元素显示的特定地点内容，方法是嵌套
子元素以选择和配置地点详情，如以下
代码段所示：
<gmp-advanced-place-details-compact>
<gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
<gmp-place-photo></gmp-place-photo>
<gmp-place-name></gmp-place-name>
<gmp-place-rating></gmp-place-rating>
<gmp-place-address></gmp-place-address>
<gmp-place-opening-hours></gmp-place-opening-hours>
<gmp-place-attribution></gmp-place-attribution>
</gmp-advanced-place-details-compact>每个子内容元素都会选择要显示的相应地点详情。 子元素的顺序无关紧要，因为所选 详情始终以固定的预定义顺序呈现。您可以使用特定于内容的属性进一步配置其中一些 元素。
如需详细了解所有受支持的内容元素，请参阅 地点 widget 内容自定义 参考文档。
为简单起见，您还可以使用
gmp-place-all-content
显示高级地点详情紧凑型
元素中提供的所有详情，或使用
gmp-place-standard-content
显示标准配置。
配置外观
在垂直方向上，
gmp-advanced-place-details-compact 元素的建议宽度范围为 180 像素到 300 像素。宽度小于 160 像素时，可能无法正确显示
。请勿设置固定高度。
在水平方向上，
gmp-advanced-place-details-compact 元素的建议宽度范围为 180 像素到 500 像素。宽度小于 160 像素时，可能无法正确显示
。当宽度小于 350 像素时，系统不会显示缩略图。
请勿设置固定高度。
gmp-advanced-place-details-compact 元素还支持各种自定义 CSS 属性，用于配置元素的颜色和字体。如需了解详情，请参阅
Places UI Kit 自定义样式
。
请注意，如果将高级地点详情紧凑型元素添加到
信息窗口，则必须直接对
gmp-advanced-place-details-compact元素应用自定义样式。这是因为
信息窗口是地图的影子 DOM 的一部分，因此不会应用外部 CSS 样式
。
gmp-advanced-place-details-compact { --gmp-color-surface: #202124; --gmp-color-on-surface: #ffffff; --gmp-color-on-surface-variant: #9aa0a6; --gmp-color-primary: #8ab4f8; --gmp-font-family: "Roboto", sans-serif; }
此示例演示了如何使用
InfoWindow
和
AdvancedMarkerElement以程序化方式向地图添加
AdvancedPlaceDetailsCompactElement
。
高级功能
自定义操作按钮
将操作按钮添加为高级地点详情
组件的直接子项。使用 <gmp-place-link> 进行标准
导航连接，并明确指定 action
属性。您可以选择指定 slot 属性。
有效的预定义操作包括 open-website、open-directions、open-map 和 call。如果省略 slot 属性，则默认值为
action-main.
<gmp-advanced-place-details-compact orientation="vertical" truncation-preferred> <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request> <!-- Other content items --> <gmp-place-link action="open-website" target="_blank"></gmp-place-link> <gmp-place-link action="open-directions" slot="action-corner"></gmp-place-link> </gmp-advanced-place-details-compact>
视觉归因要求
重要提示： 您必须向最终用户明确说明自定义操作 按钮何时会与 Google 以外的第三方分享用户信息。 请参阅 视觉归因要求。
省略地点名称
如需省略地点名称，请从自定义内容中明确排除
<gmp-place-name> 元素。
<gmp-advanced-place-details> <gmp-place-details-place-request place="places/ChIJT7FdmYiAhYAROFOvrIxRJDU"></gmp-place-details-place-request> <!-- Exclude <gmp-place-name> to hide the place name --> <gmp-place-rating></gmp-place-rating> <gmp-place-address></gmp-place-address> </gmp-advanced-place-details>
过滤评价和媒体内容
此代码示例仅显示提及“咖啡”的媒体内容和评价。
<gmp-advanced-place-details> <gmp-place-details-place-request place="places/ChIJT7FdmYiAhYAROFOvrIxRJDU"></gmp-place-details-place-request> <gmp-place-media query="coffee"></gmp-place-media> <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews> </gmp-advanced-place-details>
您还可以使用 JavaScript 通过读取 searchMediaCount 和 searchReviewsCount 属性来检索与给定搜索查询匹配的项目总数。您必须等待 gmp-load 事件，然后才能
访问这些属性。
const detailsElement = document.querySelector('gmp-advanced-place-details'); const mediaElement = detailsElement.querySelector('gmp-place-media'); mediaElement.addEventListener('gmp-load', (e) => { console.log('Total matching photos: ', e.target.searchMediaCount); }); const reviewsElement = detailsElement.querySelector('gmp-place-reviews'); reviewsElement.addEventListener('gmp-load', (e) => { console.log('Total matching reviews: ', e.target.searchReviewsCount); });