Google 会使用 AI 技术将内容翻译成您偏好的语言。AI 翻译可能包含错误。

高级地点搜索元素（预览版）

AdvancedPlaceSearchElement 是一种 HTML 元素，用于以列表形式呈现地点搜索结果。您可以通过以下两种方式配置 gmp-advanced-place-search 元素：

如需在给定区域内搜索特定类型的地点，请使用附近搜索请求，以使用 PlaceNearbySearchRequestElement 呈现搜索结果。
如需根据文本查询搜索给定区域中的地点，请使用按文本搜索请求，以使用 PlaceTextSearchRequestElement 呈现搜索结果。

附近搜索和文本搜索均提供相同的高级功能，包括自定义操作按钮、过滤评价和媒体、配置地点提供方信息，以及处理地点选择和错误。

搜索附近地点的请求

从菜单中选择地点类型，即可查看该地点类型附近的搜索结果。

附近搜索主要配置为按地点类型和位置进行搜索，并且可以使用 rankPreference 属性按距离或热门程度对结果进行排名。如需了解详情，请参阅 PlaceNearbySearchRequestElement 类参考文档。

此示例会根据用户选择的地点类型，通过附近搜索来呈现高级地点搜索元素。它还会显示所选地点的 AdvancedPlaceDetailsCompactElement。

如需将高级地点搜索元素添加到地图中，请向 HTML 网页添加一个包含嵌套 gmp-place-nearby-search-request 元素的 gmp-advanced-place-search 元素。

<gmp-advanced-place-search selectable>
    <!-- Nearby search requests require a location restriction to return results. Often set programmatically. -->
    <gmp-place-nearby-search-request max-result-count="5"></gmp-place-nearby-search-request>
    <template slot="place-list-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

借助 select 元素，用户可以从菜单中选择地点类型。为简单起见，此处仅列出三种地点类型：餐厅、咖啡馆和电动车辆充电站。

<div class="controls">
    <label for="type-select">
        Select a place type:
        <select id="type-select" class="type-select">
            <option value="restaurant">Restaurant</option>
            <option value="cafe" selected>Cafe</option>
            <option value="electric_vehicle_charging_station">
                EV charging station
            </option>
        </select>
    </label>
</div>

当用户从菜单中选择地点类型时，gmp-place-nearby-search-request 元素会更新，高级地点搜索元素会显示结果。

按文字搜索请求

在输入字段中输入搜索字词，然后点击搜索按钮，即可获取与该字词匹配的地点列表。

文本搜索主要配置为使用文本查询和位置进行搜索，并且可以通过价格水平、评分以及是否当前营业来优化结果。您还可以使用 rankPreference 属性按距离或热门程度对结果进行排名。如需了解详情，请参阅 PlaceTextSearchRequestElement 类参考文档。

此示例会根据用户文本输入呈现高级地点搜索元素。它还会显示所选地点的 AdvancedPlaceDetailsCompactElement。

如需将高级地点搜索元素添加到地图中，请向 HTML 网页添加一个包含嵌套 gmp-place-text-search-request 元素的 gmp-advanced-place-search 元素。

<gmp-advanced-place-search selectable>
    <gmp-place-text-search-request max-result-count="5"></gmp-place-text-search-request>
    <template slot="place-list-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

input 元素允许用户输入搜索文本。

<div class="controls">
    <input
        type="text"
        id="query-input"
        class="query-input"
        placeholder="Search for a place"
        value="cafe" />
    <button id="search-button" class="search-button">
        Search
    </button>
</div>

当用户点击搜索按钮时，系统会运行搜索功能，更新 gmp-place-text-search-request 元素，并显示高级地点搜索元素的结果。

高级功能

自定义操作按钮

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

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <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-search>

过滤评价和媒体内容

此代码示例仅显示提及“咖啡”的媒体和评价。

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-media query="coffee"></gmp-place-media>
    <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
  </template>
</gmp-advanced-place-search>

配置地点归属信息

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

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <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-search>

处理地点选择和错误

如果存在 selectable 属性，您可以监听 gmp-select 事件以检索用户选择的地点。您还可以监听 gmp-error 事件，以便在无法提取地点数据时妥善处理相关情形。

const searchElement = document.querySelector('gmp-advanced-place-search');

searchElement.addEventListener('gmp-select', (e) => {
  console.log('User selected place: ', e.place);
});

searchElement.addEventListener('gmp-error', (e) => {
  // e.detail contains the structured error payload
  console.error('Failed to load places: ', e.detail.error);
});