高级地点列表元素（预览版）

AdvancedPlaceListElement 是一个 HTML 元素，用于根据 地点资源名称在列表中呈现一系列地点。

高级地点列表元素提供 高级功能，包括自定义操作按钮、配置地点归属信息和处理错误。

基本用法

如需使用该组件，请将 <gmp-advanced-place-list> 元素添加到您的页面，并通过逗号分隔列表形式的地点资源名称 传递 places 属性。

<gmp-advanced-place-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU,places/ChIJyWEHuEmuEmsRm9hTkapTCrk">
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-address></gmp-place-address>
    <gmp-place-media query="coffee"></gmp-place-media>
    <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
  </template>
</gmp-advanced-place-list>

高级功能

自定义操作按钮

在高级地点列表组件的 <template slot="place-list-item"> 元素内添加操作按钮作为子元素。使用 <gmp-place-link> 进行标准 导航连接，并明确指定 action 属性。您可以选择指定 slot 属性。有效的 预定义操作包括open-website、 open-directions、open-map和call。如果省略 slot 属性，则默认值为 action-main。

<gmp-advanced-place-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU">
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-link action="open-website" target="_blank"></gmp-place-link>
    <gmp-place-link action="open-directions" slot="action-corner"></gmp-place-link>
  </template>
</gmp-advanced-place-list>

配置地点归属信息

如需配置视觉归属信息，请添加 <gmp-place-attribution> 元素以显示总体 Maps API 数据归属信息配置，例如照片或评价的来源。 它必须作为 <template> 的直接同级元素添加。 放置在 内部 的 <template> 元素 将被忽略。 

<gmp-advanced-place-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU">
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
  </template>
  <gmp-place-attribution light-scheme-color="black" dark-scheme-color="gray"></gmp-place-attribution>
</gmp-advanced-place-list>

处理错误

您可以监听 gmp-error 事件，以便在一个或多个请求的地点加载失败时妥善处理。

const listElement = document.querySelector('gmp-advanced-place-list');
listElement.addEventListener('gmp-error', (e) => {
  // e.detail.errors contains an array of failure objects with specific failed Resource Names
  console.error('Failed to load places: ', e.detail.errors);
});