天天看點

【高德地圖API】從零開始學高德JS API(四)搜尋服務

摘要:地圖服務,大家能想到哪些?POI搜素,輸入提示,位址解析,公交導航,駕車導航,步行導航,道路查詢(交叉口),行政區劃等等。如果說覆寫物Marker是地圖的骨骼,那麼服務,就是地圖的氣血。有個各種各樣的地圖服務,我們的地圖應用才能變得有血有肉,活靈活現。第四篇拆成了幾個要點,本篇主要講搜尋服務。包括周邊搜尋,關鍵詞搜尋,範圍搜尋,搜尋提示(自動完成,輸入提示),行政區域,交叉路口,檢索自有資料(雲圖)。

demo:

示意圖1:自動完成,輸入提示

【高德地圖API】從零開始學高德JS API(四)搜尋服務

示意圖2:雲圖,自有資料檢索,A-H圖示顯示,麻點圖

【高德地圖API】從零開始學高德JS API(四)搜尋服務

---------------------------------------------------------------------------------------

一、POI搜尋

1、關鍵字查詢

使用search方法,傳一個關鍵詞參數即可。

完整代碼:

示意圖:

【高德地圖API】從零開始學高德JS API(四)搜尋服務

2、輸入提示

html部分:

JS部分:

在地圖初始化時,添加【自動完成/輸入提示】插件。

輸入提示部分:

【高德地圖API】從零開始學高德JS API(四)搜尋服務

3、周邊查詢

使用searchNearBy方法,需要傳入關鍵詞,中心點經緯度,搜尋半徑。

全部代碼:

【高德地圖API】從零開始學高德JS API(四)搜尋服務

4、可視區域查詢 5、範圍内查詢

範圍内查詢,可以是多邊形,可以是圓形,也可以是矩形。

我們在這裡,用一個矩形搜尋來舉例。

使用searchInBounds方法,傳入關鍵詞,與範圍即可。

可視區域,就是視野内查詢,這時可以擷取整個可視區域,把這個區域傳給範圍内搜尋即可。

【高德地圖API】從零開始學高德JS API(四)搜尋服務

6、道路查詢(交叉口)

如果要查詢北京的101國道,需要傳參數‘101’和‘北京’。

【高德地圖API】從零開始學高德JS API(四)搜尋服務

7、自有資料檢索(不需要資料庫)

檢索自有資料,是我的最愛。其實就是使用雲圖就好了。

登入雲圖管理台:

建立地圖

【高德地圖API】從零開始學高德JS API(四)搜尋服務

批量導入自有資料,或者手工添加自有資料。

【高德地圖API】從零開始學高德JS API(四)搜尋服務

點選預覽,即可獲得自己的地圖!比如這樣的:

【高德地圖API】從零開始學高德JS API(四)搜尋服務

顯示雲圖層,需要獲得自己的tableID:

更多詳細教程,可以檢視:

《東莞酒店雲圖》:

《貪官羅馬圖》:

《三甲醫院雲圖》:

通過雲圖的雲檢索功能,檢索出自有資料中的“酒店”。并用圖檔為A-H的标注進行标示。

雲檢索:

檢索成功的回調函數:

添加Marker:

效果圖:

【高德地圖API】從零開始學高德JS API(四)搜尋服務

全部源代碼:

【高德地圖API】從零開始學高德JS API(四)搜尋服務

View Code

--------------------------------------------------------------------------------------------------------

【大家還想看到什麼内容,可以留言給我】

下一篇預告:

二、位址解析

1、位址解析  2、逆位址解析

三、導航規劃

1、公交導航  2、駕車導航  3、步行導航 

四、定位

1、浏覽器定位  2、IP定位

繼續閱讀