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 đó.
Phần tử Danh sách địa điểm nâng cao cung cấp các tính năng nâng cao, bao gồm tuỳ chỉnh nút hành động, định cấu hình thuộc tính Đị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 một 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 phẩy thông qua thuộc tính 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>Các tính năng nâng cao
Tuỳ chỉnh nút thao tác
Thêm các nút thao tác làm thành phần con bên trong phần tử <template slot="place-list-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 tiêu chuẩn và chỉ định rõ ràng thuộc tính action. Bạn có thể tuỳ ý chỉ định thuộc tính slot. Các thao tác hợp lệ được xác định trước là open-website, open-directions, open-map và call. Nếu bạn bỏ qua thuộc tính slot, thì giá trị mặc định sẽ là 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>Định cấu hình mô hình phân bổ Địa điểm
Để định cấu hình thông tin ghi nhận trực quan, hãy thêm phần tử <gmp-place-attribution> để hiển thị các cấu hình thông tin ghi nhận dữ liệu tổng thể của Maps API, 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 dưới dạng phần tử anh em trực tiếp của <template>.
Thông tin ghi nhận quyề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="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>Xử lý lỗi
Bạn có thể theo dõi sự kiện gmp-error để xử lý một cách thích hợp 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); });