在本文件中,您將瞭解如何使用 Nearby Search (New) API 建構簡單又符合成本效益的架構
本地探索體驗。
區域探索功能會在搜尋飯店或房地產時,向使用者顯示指定地點附近的重要觀光景點。這類內容通常包含互動式地圖,另一個面板包含地點選擇器和相片圖庫。我們會為您提供不同的 Google 地圖平台產品和功能,以強化互動體驗。
應用實例
現在就讓我們來認識本機探索整合服務的哪些元素可帶來使用者價值:
探索:顯示不同類型的相關地點,讓使用者概略瞭解單一地點。
互動性 - 讓使用者選取地點並動態重新整理資料
而不是一個相對的
視覺化 - 提供地點評論和相片
以及步行時間和距離,讓使用者能快速瞭解是否符合自身需求
參考架構
本地探索
打造本地探索體驗的方法有很多種,以下整合是使用者體驗的自訂範例,運用了已知的 Google 地圖平台 API 和一些實用的新功能。如果您想建立本機探索的範本方法,可以使用網頁元件。
範例應用程式
範例逐步操作說明
下表將應用程式範例分為不同步驟,一併說明使用 Google 地圖平台 API 的技術導入做法。
1. 根據 AutocompleteSearch 位置顯示 Location Search
- 載入 Maps JavaScript API。
- Place Autocomplete 查詢,或挑選地圖上的位置。
2. 使用 Nearby Search (新版) API 顯示當地搜尋點
- 熱門程度排名 (關聯性更高的結果) 或距離排名。
includedTypes
、excludedTypes
;如果您是飯店,可以排除「住宿」類型,並且只加入合適類型,例如「餐廳、咖啡廳、公園、tourit_attraction」。- 運用
includedPrimaryTypes
(excludedPrimaryTypes
) 可進一步控管結果。 - `locationRestriction 可避免結果數量不足或地點距離太遠。如要顯示未傳回的結果,請先擴大圓形 / 矩形的大小,再顯示結果。
預訂飯店時,資料欄位要求的資料欄位如下:
- 基本 (
displayName
、types
、openingHours
、formattedAddress
) - 聯絡人 (
websiteUri
、nationalPhoneNumber
、internationalPhoneNumber
) - 偏好格式 (
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 } } }
使用資料欄位搜尋房地產時的查詢範例:
- 基本 (
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. 透過 Dynamic Maps 和 Directions API 新增互動功能
- 查詢 Directions API,取得最新的路線和步驟。* 在下一節中使用時間。
4. 在互動時顯示地點詳細資訊
Description:
displayName
、types
、rating
、userRatingCount
、priceLevel
。Time:來自前一個 Directions API 查詢。
評論:
reviews[i].author
、reviews[i].rating
、reviews[i].text
。圖片:在 Nearby Search (新版) API 無限制預覽期間,您必須使用
place.id
查詢 Places Details,才能取得 photo_reference,以便在體驗中一次查詢一個
查詢數量和相關費用
- Maps JavaScript API:載入體驗時提供 1 個地圖。
- Places Autocomplete API:每個輸入的字元都有 1 項查詢 (如果使用 Autocomplete 小工具),則可以自訂。
- Nearby Search (新版) API:顯示每 20 個地點 1 次查詢。根據查詢回應中的地點資料,會產生不同費用。
- Directions API:使用者選取的每個地點 1 項查詢。
- Place Photo API:1 項顯示的相片。
結論
在地探索體驗是創造使用者價值的絕佳方式。在這個示範的實作案例中,當您透過 Nearby Search (新版) API 在 Google 地圖平台上以特殊功能建立這類體驗時,可能會加入許多功能。
後續步驟
建議延伸閱讀:
- Maps JavaScript API 中的網頁元件
- Place Autocomplete 最佳化
- 其他地點介面集服務
- 請在下方提供意見。
協作者
主要作者:
Thomas Anglaret | Google 地圖平台解決方案工程師