AdvancedPlaceSearchElement là một phần tử HTML hiển thị kết quả tìm kiếm địa điểm trong một danh sách. Có hai cách để định cấu hình phần tử gmp-advanced-place-search:
-
Để tìm kiếm các địa điểm thuộc một loại cụ thể trong một khu vực nhất định, hãy sử dụng yêu cầu tìm kiếm lân cận để hiển thị kết quả tìm kiếm bằng
PlaceNearbySearchRequestElement. -
Để tìm kiếm các địa điểm trong một khu vực nhất định dựa trên một cụm từ tìm kiếm dạng văn bản, hãy sử dụng yêu cầu tìm kiếm theo văn bản để hiển thị kết quả tìm kiếm bằng cách sử dụng
PlaceTextSearchRequestElement.
Cả tính năng tìm kiếm lân cận và tìm kiếm bằng văn bản đều cung cấp cùng một tính năng nâng cao, bao gồm cả việc tuỳ chỉnh các nút hành động, lọc bài đánh giá và nội dung nghe nhìn, định cấu hình thuộc tính Địa điểm, cũng như xử lý lựa chọn địa điểm và lỗi.
Tìm kiếm yêu cầu lân cận
Chọn một loại địa điểm trong trình đơn để xem kết quả tìm kiếm lân cận cho loại địa điểm đó.
Tính năng tìm kiếm lân cận chủ yếu được định cấu hình để tìm kiếm theo loại địa điểm và vị trí, đồng thời kết quả có thể được xếp hạng theo khoảng cách hoặc mức độ phổ biến bằng cách sử dụng thuộc tính rankPreference. Hãy xem tài liệu tham khảo về lớp PlaceNearbySearchRequestElement để biết thêm thông tin chi tiết.
Ví dụ này hiển thị phần tử Tìm kiếm địa điểm nâng cao để phản hồi một cụm từ tìm kiếm ở gần với loại địa điểm do người dùng chọn. Thao tác này cũng hiển thị một AdvancedPlaceDetailsCompactElement cho địa điểm đã chọn.
Để thêm phần tử Tìm kiếm địa điểm nâng cao vào bản đồ, hãy thêm phần tử gmp-advanced-place-search có phần tử gmp-place-nearby-search-request lồng nhau vào trang HTML.
<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>
Phần tử select cho phép người dùng chọn một loại địa điểm trong trình đơn. Để đơn giản, chỉ có 3 loại địa điểm được liệt kê: nhà hàng, quán cà phê và trạm sạc xe điện.
<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>
Khi người dùng chọn một loại địa điểm trong trình đơn, phần tử gmp-place-nearby-search-request sẽ được cập nhật và phần tử Tìm kiếm địa điểm nâng cao sẽ hiển thị kết quả.
Tìm kiếm bằng yêu cầu văn bản
Nhập cụm từ tìm kiếm vào trường nhập dữ liệu rồi nhấp vào nút Tìm kiếm để nhận danh sách những địa điểm phù hợp với cụm từ đó.
Tính năng tìm kiếm bằng văn bản được định cấu hình chủ yếu để tìm kiếm bằng một cụm từ tìm kiếm dạng văn bản và vị trí, đồng thời bạn có thể tinh chỉnh kết quả theo mức giá, điểm xếp hạng và trạng thái hiện tại (đang mở cửa hay không). Bạn cũng có thể xếp hạng kết quả theo khoảng cách hoặc mức độ phổ biến bằng cách sử dụng thuộc tính rankPreference. Hãy xem tài liệu tham khảo về lớp PlaceTextSearchRequestElement để biết thêm thông tin chi tiết.
Ví dụ này hiển thị phần tử Advanced Place Search (Tìm kiếm địa điểm nâng cao) để phản hồi thông tin đầu vào là văn bản của người dùng. Thao tác này cũng hiển thị một AdvancedPlaceDetailsCompactElement cho địa điểm đã chọn.
Để thêm phần tử Tìm kiếm địa điểm nâng cao vào bản đồ, hãy thêm phần tử gmp-advanced-place-search có phần tử gmp-place-text-search-request lồng nhau vào trang HTML.
<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>
Phần tử input cho phép người dùng nhập văn bản tìm kiếm.
<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>
Khi người dùng nhấp vào nút Tìm kiếm, hàm tìm kiếm sẽ chạy, phần tử gmp-place-text-search-request sẽ được cập nhật và phần tử Tìm kiếm địa điểm nâng cao sẽ hiển thị kết quả.
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 Tìm kiếm đị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-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>Lọc bài đánh giá và nội dung nghe nhìn
Đoạn mã mẫu này chỉ cho thấy nội dung nghe nhìn và bài đánh giá có đề cập đến "cà phê".
<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>Đị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-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>Xử lý việc chọn địa điểm và lỗi
Khi thuộc tính selectable xuất hiện, bạn có thể theo dõi sự kiện gmp-select để truy xuất địa điểm mà người dùng đã chọn. Bạn cũng có thể theo dõi sự kiện gmp-error để xử lý các trường hợp khi không tìm nạp được dữ liệu về địa điểm một cách thích hợp.
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); });