? ? ?最近在做的有關于北京海淀智慧旅游的一個項目，既然是旅游項目，那么涉及到地圖的操作也就是必然的事情了。前幾篇文章，主要是分享了在地圖上標記多個景點及其景點信息的技術。其實跟項目中還是有一些不一樣的。項目中要求實時顯示景點的信息，根據實時數據，更新Marker的顏色（綠、橙、紅），以及實時更新景點Brand上的景點信息（游客流量、舒適度）。這些都沒有出現在文章中，文章只是從技術的角度來驗證的。
? ? ?今天主要要做的是地圖上的一個基本功能——交互搜索。
? ? ?其實官網上搜索的例子并不是很多，而且真的不怎么滴。不過作為參考，還是可以的。點擊[這里](http://map.sogou.com/api/documentation/javascript/api2.5/examples/index.html#search)查看“[范圍查詢-指定分類id，關鍵字](http://map.sogou.com/api/documentation/javascript/api2.5/examples_doc/search_4.html)”代碼示例。如果沒有你想要的功能，那你就去官方API文檔中找吧，點擊[這里](http://map.sogou.com/api/documentation/javascript/api2.5/reference_service.html#service_search)看搜索類API。
? ? ?先貼出我的搜索也代碼，很簡單，一個輸入框，一個搜索按鈕：
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>搜狗地圖交互搜索</title>
<style type="text/css">
#map{position:absolute;width:1064px; height:550px;}
#result{position:absolute;top:30px;left:1064px;width:300px;}
</style>
<script type="text/javascript" src="http://api.go2map.com/maps/js/api_v2.5.1.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.1-rc2/jquery.min.js"></script></script>
</head>
<body onload="initialize()">
<input type="text" class="kw" onkeydown="if(event.keyCode == '13') search_center();"/>
<input type="button" onclick="search_center()" value="搜索" />
<div id="map" class="map_map"></div>
<div id="result"></div>
</body>
</html>
~~~
? ? ?既然是地圖，肯定缺少不了初始化地圖的代碼：
~~~
var map;//地圖
var markers;//數組：結果標記
var sRender;//搜索渲染對象
//初始化
function initialize(){
var myLatLng = new sogou.maps.Point(12939000,4840250);
var myOptions = {
zoom: 10,
center: myLatLng,
mapControlType:5
};
map = new sogou.maps.Map(document.getElementById("map"), myOptions);//創建地圖
sRender=new sogou.maps.SearchRenderer();//創建搜索渲染對象
}
~~~
? ? ?既然是搜索，必須得有搜索的方法：
~~~
//搜索
function search_center(){
var kw = $(".kw").val();
search(null,kw);
}
//xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
//以下內容是根據指定內容，進行搜索定位
//xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
//搜索位置（如酒店）
function search(classid,kw){
clearMarker(sRender);//清除定位標記
var request={
'map':map,
'what':{},
'range':{'city':'北京'}
};
if(classid) request.what.classid=classid;
if(kw) request.what.keyword=kw+",";
var search=new sogou.maps.Search();//創建搜索實例
sRender=new sogou.maps.SearchRenderer();//({'panel':document.getElementById('result')});//創建搜索渲染對象
search.search(request,callback); //執行搜索
search.setRenderer(sRender);//渲染搜索結果
}
~~~
? ? ?每次搜索，都需要先清理原先的搜索記錄：
~~~
//清除標記
function clearMarker(sRender){
$("#result").children().remove();//清空查詢列表
sRender.clearResultFeatures();
var m=sRender.getMarkers();
if(m){
//動態改變了數組的值，所以必須是倒著操作
for(var i=m.length-1;m && i>=0;i--){
m[i].setMap(null);
m.pop();//將最后一個對象彈出
}
}
}
~~~
? ? ?每次搜索完畢，重新定位中心點，我這里是獲取第一個搜索結果，作為新的中心點：
~~~
//搜索完畢后的回調，這里重新設定中心點
function callback(result){
setTimeout(getMarkers,500);
}
//獲取中心節點
function getMarkers(){
markers = sRender.getMarkers();
if(markers && markers.length>0){
center = markers[0].options.feature.points[0];
toCenter();//重新定位地圖中心點
}
}
//定位中心
function toCenter(){
map.setCenter(center)
}
~~~
? ? ?js就這么多，值得注意的是，這一串兒的js，都要放到</body>后面。先來看看效果圖吧：
（[點擊這里到網站上查看](http://mfxuan.free.800m.net/search_simple.html)）
? ? ?簡單說一下，
1. 初始化的js，其中map的初始化自然就不用說了，但是多了一個sRender對象，這是一個搜索渲染類對象，就是把搜索結果渲染到地圖上。有興趣的可以看看[官方API文檔](http://map.sogou.com/api/documentation/javascript/api2.5/reference_service.html#service_srender)；
1. 搜索的js，主要是調用了Search 對象的search方法。搜索參數的設定請參考API文檔；
1. 清理的js，本來是只調用sRender對象的clearResultFeatures()方法的，結果執行后發現地圖上的marker消失了，但是如果執行sRender.getMarkers()，卻發現marker對象還在，只是不在地圖上顯示了。但是還是占用著資源呢。所以我就把這個marker全部從sRender對象中清除了。
1. 最后一個是重新設置中心點的js，雖然地圖會自動設定新的中心點，但是我們后面還要做周邊搜索，必須先匹配最符合條件的結果作為中心進行區域搜索，所以這這里先把它做出來了。
? ? ?如果想把搜索結果以列表的形式顯示出來，只要修改一下sRender對象的創建即可：
~~~
sRender=new sogou.maps.SearchRenderer({'panel':document.getElementById('result')});
~~~
? ? ?這個result就是頁面上一個div的id。這樣就會自動把結果放入到這個div中了。
? ? ?到此搜索功能就基本上完成了。接下來做一下周邊搜索的功能。最后再美化一版基本上的思路就是這個樣子，大家多多指點吧。
