? ? ?在上一篇文章《[GIS（五）——完成js版搜狗地圖基本交互搜索功能](http://blog.csdn.net/xiaoxian8023/article/details/39503017)》中，介紹了搜狗地圖的關鍵字搜索功能，今天就實現以下另一個重要功能吧——那就是周邊搜索功能。
? ? ?按照慣例，還是把官網上的示例代碼給大家貼出來。[飛機票](http://map.sogou.com/api/documentation/javascript/api2.5/examples_doc/search_3.html)在此。周邊搜索的功能，跟關鍵字搜索其實是一樣的，也是主要用到的了SearchRequest這個類，點擊[這里](http://map.sogou.com/api/documentation/javascript/api2.5/reference_service.html#search_request)查看api文檔。SearchRequest 對象規范：
| 屬性 | 類型 | 說明 |
|-----|-----|-----|
| `map` | `Map` | 進行搜索的地圖實例 |
| `renderer` | `[SearchRenderer](http://map.sogou.com/api/documentation/javascript/api2.5/reference_service.html#service_srender)` | 將結果進行渲染的對象。也可以通過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](http://map.sogou.com/api/documentation/javascript/api2.5/sort.html)<String>, id:uid或者dataid<String> }`, 分類id:普通數字代表小類id，前綴加C_的代表大類id。查詢時關鍵字與分類id 可以聯合查詢。id 只能單獨查詢，如果存在id屬性，就只按id查詢。 【[查看所有分類id](http://map.sogou.com/api/documentation/javascript/api2.5/sort.html)】 |
| `clientid` | `String` | 可選。為用戶提供更穩定的服務。【[查看詳情](http://map.sogou.com/api/documentation/javascript/api2.5/clientid.html)】 |
? ? ?從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="周邊醫院" />
~~~
? ? ?效果圖如下：
[點擊這里到網站上查看](http://mfxuan.free.800m.net/search_ok.html)
? ? ?周邊搜索和關鍵字搜索都是同一個，只不過設定的參數不一致。而且我可以同時設定關鍵字和周邊搜索，進行范圍更小更精確的搜索。只是用的話，其實沒什么太大的難度，只要按照官方的api文檔和示例代碼就可以了解怎么開發了。
? ? ?上面提到的都是從技術的角度來驗證問題，如果真正使用的時候，最起碼還是要提供智能提示的功能。界面也不能這么簡陋，下一篇文章，我將解決這2個問題。敬請期待吧。
? ? ?
