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