在本文中,您將瞭解如何使用 Nearby Search (新版) API 建構簡單且經濟實惠的
當地探索體驗。
當使用者搜尋飯店或房地產時,本地探索體驗會向使用者顯示指定地點附近的重要景點。通常由互動式地圖組成,並附加一個面板,內含地點選擇器和相片庫。您將看到不同的 Google 地圖平台產品和功能,可透過互動性提升使用體驗。
應用實例
接下來,我們來瞭解本機探索整合功能的哪些元素可為使用者帶來價值:
探索:顯示各種類型的相關地點,讓使用者一覽單一地點周遭的景點。
互動性:讓使用者選取地點,並動態重新整理資料
相對於該地點。
視覺化 - 提供地點評論和相片
和步行時間和距離,讓使用者快速瞭解是否符合需求。
參考架構
本區探索
您可以透過多種方式建立當地探索體驗。以下整合是使用者體驗的自訂範例,可運用知名的 Google 地圖平台 API 和一些令人興奮的新功能。如果您想使用範本方法進行本機探索,可以使用Web 元件。
範例應用程式
範例逐步操作說明
下表列出分步驟的應用程式範例,以及使用 Google 地圖平台 API 實作的技術說明。
1. 使用自動完成功能進行地點搜尋
- 載入 Maps JavaScript API。
- 使用 Places 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 and Directions API 新增互動功能
- 透過查詢路線 API,取得最新的路線和步驟。 * 在下一節中使用時間。
4. 在互動時顯示地點的詳細資訊
說明:
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 個要求 (如果使用自動完成小工具),可自訂。
- Nearby Search (新版) API:每顯示 20 個地點就產生 1 個要求。根據查詢回應中的地點資料收費。
- Directions API:每個使用者選取的地點 1 次查詢。
- Place Photo API:每張顯示的相片需執行 1 次查詢。
結論
當地探索體驗是提供使用者價值的強大方式。這個示範實作包含許多功能,您在 Google 地圖平台上建立這類體驗時,可能會加入這些功能,並使用 Nearby Search (New) API 的特殊功能。
後續步驟
建議參閱以下文章:
- Maps JavaScript API 中的網頁元件
- Place Autocomplete 最佳化
- 其他 Places Services
- 請在下方提供意見回饋。
貢獻者
主要作者:
Thomas Anglaret | Google 地圖平台解決方案工程師