在本文件中,您將瞭解如何使用 Nearby Search (新版) API 變更為 打造簡單又符合成本效益的方案
本地探索體驗。
在地探索體驗會向使用者顯示特定地點附近的重要觀光景點 您在搜尋飯店或房地產時指定的代碼。這類指令通常是由 互動式地圖,並加入一個內含地點選擇器和 圖片庫你會看到不同的 Google 地圖平台 產品和功能,提升互動體驗。
應用實例
接著就來談談本機探索整合服務的哪些元素能吸引使用者 值:
探索:為使用者提供單一地點的概略資訊 顯示不同類型的相關位置,助您一臂之力。
互動性 - 讓使用者選取地點並動態重新整理資料
而不是一個相對的
視覺化 - 提供地點評論和相片
以及步行時間和距離,方便使用者快速瞭解 他們的需求
參考架構
本地探索
打造本地探索體驗的方法有很多種,下列 整合是提供使用者體驗的自訂範例。 和一些實用的新功能。如果發生以下情況: 想建立一個範本來開發當地使用者,可以使用網頁版服務 元件
範例應用程式
範例逐步操作說明
您會在範例應用程式下方的表格中,看到分成多個步驟的表格。 以及 Google 地圖技術實作相關說明 平台 API
1. 根據 AutocompleteSearch 位置顯示 Location Search
- 載入 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 新增互動功能
- 查詢「路線」來查看最新的航程和步數 API。 * 在下一節中使用時間。
4. 在互動時顯示地點詳細資訊
說明:
displayName
、types
、rating
、userRatingCount
、priceLevel
。Time:來自前一個 Directions API 查詢。
評論:
reviews[i].author
、reviews[i].rating
、reviews[i].text
。圖片:無限制的 Nearby Search (新版) API 預覽期間, 將必須查詢地點介面集 詳細資料 搭配
place.id
可享 photo_reference 然後在搜尋中逐一查詢
查詢數量和相關費用
- 地圖 JavaScript API: 載入 1 個地圖。
- Places Autocomplete API:每輸入一個字元 (如果使用 自動完成 Widget), 可以視需求自訂
- Nearby Search (新版) API: 顯示 20 個地點,共 1 個查詢。根據 Place 收費 資料 包含在查詢回應中
- 路線 API: 使用者選取的每個地點,有 1 筆查詢。
- Place Photo API: 每顯示 1 張相片。
結論
在地探索體驗是創造使用者價值的絕佳方式。這個 您的示範導入方法有很多功能 利用特殊功能在 Google 地圖平台上打造如此便利的體驗 透過 Nearby Search (新版) API 。
後續步驟
建議延伸閱讀:
- Maps JavaScript API 中的網頁元件
- Place Autocomplete 最佳化
- 其他地點介面集服務
- 請在下方提供意見。
貢獻者
主要作者:
湯瑪斯安格拉特 |Google 地圖 平台解決方案工程師