Phần tử danh sách địa điểm nâng cao

AdvancedPlaceListElement là một phần tử HTML hiển thị một tập hợp các địa điểm trong danh sách dựa trên Tên tài nguyên địa điểm của các địa điểm đó.

Thành phần Danh sách địa điểm nâng cao cung cấp các tính năng nâng cao, bao gồm cả việc tuỳ chỉnh các nút hành động, định cấu hình thông tin ghi nhận tác giả của Địa điểm và xử lý lỗi.

Cách sử dụng cơ bản

Để sử dụng thành phần này, hãy thêm phần tử <gmp-advanced-place-list> vào trang của bạn và truyền danh sách tên tài nguyên địa điểm được phân tách bằng dấu cách thông qua thuộc tính places.

Xem ví dụ về đoạn mã hoàn chỉnh

TypeScript

async function init() {
    await google.maps.importLibrary('places');
    await customElements.whenDefined('gmp-advanced-place-list');
    const listElement = document.querySelector('gmp-advanced-place-list');

    if (listElement) {
        listElement.addEventListener('gmp-error', (e: Event) => {
            const customEvent = e as CustomEvent<{ errors?: unknown }>;
            console.error(
                'Failed to load places: ',
                customEvent.detail.errors ?? customEvent
            );
        });
    }
}

void init();

JavaScript

async function init() {
    await google.maps.importLibrary('places');
    await customElements.whenDefined('gmp-advanced-place-list');
    const listElement = document.querySelector('gmp-advanced-place-list');

    if (listElement) {
        listElement.addEventListener('gmp-error', (e) => {
            const customEvent = e;
            console.error(
                'Failed to load places: ',
                customEvent.detail.errors ?? customEvent
            );
        });
    }
}

void init();

CSS

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Roboto, Arial, sans-serif;
}

HTML

<!doctype html>
<html>
    <head>
        <title>Advanced Place List</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY",
                v: "beta"
            });
        </script>
    </head>
    <body>
        <gmp-advanced-place-list
            places="places/ChIJLU7jZClu5kcR4PcOOO6p3I0 places/ChIJrRMgU7ZhLxMRxAOFkC7I8Sg places/ChIJbf8C1yFxdDkR3n12P4DkKt0 places/ChIJPTacEpBQwokRKwIlDXelxkA places/ChIJVVVViV-abZERJxqgpA43EDo">
            <template slot="details-item">
                <gmp-place-name></gmp-place-name>
                <gmp-place-address></gmp-place-address>
                <gmp-place-media query="coffee"></gmp-place-media>
            </template>
        </gmp-advanced-place-list>
    </body>
</html>

Các tính năng nâng cao

Tuỳ chỉnh nút hành động

Thêm các nút hành động dưới dạng phần tử con bên trong phần tử <template slot="details-item"> của thành phần Danh sách địa điểm nâng cao. Sử dụng <gmp-place-link> cho các kết nối điều hướng chuẩn và chỉ định rõ thuộc tính action. Bạn có thể tuỳ ý chỉ định thuộc tính slot. Các hành động được xác định trước hợp lệ là open-website, open-directions, open-map và call. Nếu bạn bỏ qua thuộc tính slot, thì thuộc tính này sẽ mặc định là action-main. 

<gmp-advanced-place-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU">
  <template slot="details-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>

Định cấu hình thuộc tính Địa điểm

Để định cấu hình thuộc tính hình ảnh, hãy thêm phần tử <gmp-place-attribution> để hiển thị cấu hình phân bổ dữ liệu API Maps bao quát, chẳng hạn như nguồn của ảnh hoặc bài đánh giá. Bạn phải thêm phần tử này làm phần tử đồng cấp trực tiếp của <template>. Thông tin ghi nhận tác giả được đặt bên trong phần tử <template> sẽ bị bỏ qua. 

<gmp-advanced-place-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU">
  <template slot="details-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>

Xử lý lỗi

Bạn có thể theo dõi sự kiện gmp-error để xử lý một cách linh hoạt các trường hợp khi một hoặc nhiều địa điểm được yêu cầu không tải được. 

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);
});