進階地點清單元素 (預先發布版)

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> 元素，顯示整體地圖 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);
});