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

       在上一篇文章《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="周邊醫院" />

       效果圖以下：

點擊這裏到網站上查看

       周邊搜索和關鍵字搜索都是同一個，只不過設定的參數不一致。並且我能夠同時設定關鍵字和周邊搜索，進行範圍更小更精確的搜索。只是用的話，其實沒什麼太大的難度，只要按照官方的api文檔和示例代碼就能夠了解怎麼開發了。

       上面提到的都是從技術的角度來驗證問題，若是真正使用的時候，最起碼仍是要提供智能提示的功能。界面也不能這麼簡陋，下一篇文章，我將解決這2個問題。敬請期待吧。