您當前位置：首頁 > 互聯網 > GIS（六）――實現js版搜狗地圖周邊搜索功能

GIS（六）――實現js版搜狗地圖周邊搜索功能

來源：程序員人生發布時間：2014-10-06 08:00:01 閱讀次數：3443次

在上一篇文章《GIS（五）――完成js版搜狗地圖基本交互搜索功能》中，介紹了搜狗地圖的關鍵字搜索功能，今天就實現以下另一個重要功能吧――那就是周邊搜索功能。

按照慣例，還是把官網上的示例代碼給大家貼出來。飛機票在此。周邊搜索的功能，跟關鍵字搜索其實是一樣的，也是主要用到的了SearchRequest這個類，點擊這里查看api文檔。SearchRequest 對象規范：

屬性	類型	說明
`map`	`Map`	進行搜索的地圖實例
`renderer`	`SearchRenderer`	將結果進行渲染的對象。也可以通過setRenderer方法設置
`range`	`object`	必選。表示查詢范圍。范圍有多個屬性，用于不同范圍的查詢`{ city:城市<String>, boundFlag:0\|2(0代表視野所在的城市內搜索; 2代表視野內搜索)<Number>, center:以中心點查詢<LatLng \|Point>, radius:以中心點進行查詢時指定半徑<Number>,limit:0\|1(指定半徑時有效，代表是否嚴格限制半徑。0代表不限制，1代表限制)<Number> }`
`what`	`object`	必選。表示要查詢的內容。有三個屬性`{ keyword:關鍵字<String>, classid:分類id<String>, id:uid或者dataid<String> }`, 分類id:普通數字代表小類id，前綴加C_的代表大類id。查詢時關鍵字與分類id 可以聯合查詢。id 只能單獨查詢，如果存在id屬性，就只按id查詢。【查看所有分類id】
`clientid`	`String`	可選。為用戶提供更穩定的服務。【查看詳情】

從api文檔中也可以看到，range這個參數是用來限定搜索范圍的，而what制定查詢內容的。所以只要我們想查什么，就要去找它的分類id，然后再進行檢索。

好了，要了解的也就這么多，接下來就是代碼實現部分了。

在原先的代碼，添加一個對象，用來將結果渲染到右側列表中：

var sRender_area;//搜索周邊渲染對象

在initialize方法中，添加創建周邊搜索的渲染對象：

function initialize(){ //.... sRender=new sogou.maps.SearchRenderer();//創建搜索渲染對象 sRender_area=new sogou.maps.SearchRenderer();//創建周邊搜索渲染對象 }

添加一個搜索周邊的方法：

//搜索周邊 function search_area(classid){ clearMarker(sRender_area);//清除定位標記 clearMarker(sRender); var request={ 'map':map, 'what':{ 'classid':classid }, 'range':{ 'city':'北京', 'center':new sogou.maps.Point(center.x,center.y), 'radius':1000, 'limit':1 //嚴格限制半徑 } }; var search=new sogou.maps.Search();//創建搜索實例 search.search(request); sRender_area=new sogou.maps.SearchRenderer({'panel':document.getElementById('result')}); search.setRenderer(sRender_area); }

js都修改完了，添加上搜索周邊的按鈕：

<input type="button" onclick="search_area('1228,1403,1330,1332')" value="周邊餐飲" /> <input type="button" onclick="search_area('97,1264,1262')" value="周邊公交" /> <input type="button" onclick="search_area('83,1321,1259')" value="周邊商場" /> <input type="button" onclick="search_area('C_32')" value="周邊酒店" /> <input type="button" onclick="search_area('1261')" value="周邊醫院" />

效果圖如下：