Trong tài liệu này, bạn sẽ tìm hiểu cách sử dụng API Tìm kiếm lân cận (Mới) để xây dựng một ứng dụng đơn giản và tiết kiệm chi phí
trải nghiệm khám phá địa phương.
Trải nghiệm khám phá địa phương cho người dùng thấy những địa điểm yêu thích chính gần một vị trí mà bạn chỉ định khi tìm kiếm khách sạn hoặc bất động sản. Chế độ xem này thường bao gồm một bản đồ tương tác, với một bảng điều khiển bổ sung chứa bộ chọn địa điểm và một thư viện ảnh. Bạn sẽ thấy nhiều sản phẩm và tính năng của Nền tảng Google Maps để nâng cao trải nghiệm tương tác.
Trường hợp sử dụng
Bây giờ, hãy tìm hiểu những thành phần của tính năng tích hợp tính năng khám phá địa phương giúp tăng giá trị người dùng:
Khám phá – Cung cấp cho người dùng thông tin tổng quan về những gì xung quanh một vị trí bằng cách hiển thị các địa điểm có liên quan thuộc nhiều loại.
Tính tương tác – Cho phép người dùng chọn một địa điểm và tự động làm mới dữ liệu
so với vị trí đó.
Hình ảnh trực quan – Cung cấp bài đánh giá, ảnh về địa điểm
cũng như thời gian và quãng đường đi bộ để người dùng nhanh chóng hiểu được liệu điểm đó có phù hợp với nhu cầu của họ hay không.
Kiến trúc tham chiếu
Khám phá tại địa phương
Có nhiều cách để tạo trải nghiệm khám phá địa phương. Việc tích hợp sau đây là một ví dụ tuỳ chỉnh về trải nghiệm người dùng tận dụng các API Nền tảng Google Maps nổi tiếng cũng như một số tính năng mới thú vị. Nếu muốn có một phương pháp mẫu để khám phá nội dung cục bộ, bạn có thể sử dụng Thành phần web.
Ứng dụng mẫu
Hướng dẫn từng bước về mẫu
Trong bảng bên dưới, bạn sẽ thấy ứng dụng mẫu được chia thành các bước cùng với nội dung mô tả cách triển khai kỹ thuật bằng API Nền tảng Google Maps.
1. Tìm kiếm vị trí với vị trí tự động hoàn thành trong Tìm kiếm
- Tải Maps JavaScript API.
- Truy vấn Tự động hoàn thành theo địa điểm hoặc chọn vị trí trên bản đồ.
2. Hiển thị các địa điểm yêu thích tại địa phương bằng API Tìm kiếm lân cận (Mới)
- Thứ hạng theo mức độ phổ biến (kết quả phù hợp hơn) hoặc Thứ hạng theo khoảng cách.
includedTypes
,excludedTypes
; nếu là khách sạn, bạn có thể loại trừ loại "nơi lưu trú" và chỉ đưa vào các loại phù hợp, ví dụ: "nhà hàng, quán cà phê, công viên, điểm tham quan du lịch".- Khai thác
includedPrimaryTypes
,excludedPrimaryTypes
để kiểm soát kết quả tốt hơn nữa. - `locationRestriction để tránh tình trạng không có đủ kết quả hoặc vị trí quá xa; trong trường hợp KHÔNG có kết quả nào, hãy mở rộng kích thước vòng tròn / hình chữ nhật trước khi hiển thị kết quả.
Mẫu truy vấn khi đặt phòng khách sạn với các trường Dữ liệu được yêu cầu:
- Cơ bản (
displayName
,types
,openingHours
,formattedAddress
) - Liên hệ (
websiteUri
,nationalPhoneNumber
,internationalPhoneNumber
) - Ưu tiên (
reviews
,priceLevel
,userRatingCount
)
{ "includedTypes": ["restaurant","cafe","park"], "excludedTypes": ["lodging","convenience_store"], "includedPrimaryTypes": ["restaurant","tourist_attraction","airport"], "excludedPrimaryTypes": ["lodging"], "maxResultCount": 20, "locationRestriction": { "circle": { "center": { "latitude": 37.7937, "longitude": -122.3965 }, "radius": 500.0 } } }
Ví dụ về truy vấn khi tìm kiếm một bất động sản trong đó các trường Dữ liệu được yêu cầu:
- Cơ bản (
displayName
,types
,openingHours
,formattedAddress
)
{ "includedTypes": ["school","transport","bus","convenience_store"], "excludedTypes": ["lodging"], "includedPrimaryTypes": ["restaurant","tourist_attraction","airport"], "excludedPrimaryTypes": ["lodging"], "maxResultCount": 20, "locationRestriction": { "circle": { "center": { "latitude": 37.7937, "longitude": -122.3965 }, "radius": 500.0 } } }
3. Thêm tính năng tương tác bằng API Đường đi và Bản đồ động
- Cập nhật đoạn đường và các bước bằng cách truy vấn API Địa chỉ. * Sử dụng thời gian trong phần tiếp theo.
4. Hiển thị thông tin chi tiết về địa điểm khi có tương tác
Description (Mô tả):
displayName
,types
,rating
,userRatingCount
,priceLevel
.Thời gian: đến từ truy vấn API Chỉ đường trước đó.
Bài đánh giá:
reviews[i].author
,reviews[i].rating
,reviews[i].text
.Hình ảnh: trong Xem trước không hạn chế của API Tìm kiếm lân cận (Mới), bạn sẽ phải truy vấn Thông tin chi tiết về địa điểm bằng
place.id
để tải photo_reference rồi truy vấn lần lượt từng địa điểm trong trải nghiệm của bạn
Số lượng truy vấn và chi phí liên quan
- API Maps JavaScript: 1 bản đồ khi tải trải nghiệm.
- API Tự động hoàn thành địa điểm: 1 truy vấn cho mỗi ký tự được nhập (nếu sử dụng Tiện ích tự động hoàn thành), bạn có thể tuỳ chỉnh truy vấn này.
- API Tìm kiếm lân cận (Mới): cứ 20 vị trí được hiển thị thì sẽ có 1 truy vấn. Hệ thống tính phí khác nhau theo dữ liệu Địa điểm trong phản hồi truy vấn.
- Chỉ đường API: 1 truy vấn mỗi địa điểm do người dùng chọn.
- API Ảnh địa điểm: 1 truy vấn cho mỗi ảnh hiển thị.
Kết luận
Trải nghiệm khám phá địa phương là một cách hiệu quả để mang lại giá trị cho người dùng. Quá trình triển khai minh hoạ này có nhiều tính năng mà bạn có thể đưa vào khi tạo trải nghiệm như vậy trên Nền tảng Google Maps nhờ các tính năng đặc biệt của API Tìm kiếm lân cận (Mới) .
Các bước tiếp theo
Tài liệu đọc thêm được đề xuất:
- Thành phần web trong Maps JavaScript API
- Tối ưu hoá tính năng tự động hoàn thành dành cho địa điểm
- Các Dịch vụ của Google Maps khác
- Hãy để lại ý kiến phản hồi bên dưới.
Người đóng góp
Tác giả chính:
Thomas Anglaret | Kỹ sư giải pháp Nền tảng Google Maps