GIS（五）——完成js版搜狗地圖基本交互搜索功能

時間 2019-11-17

原文原文鏈接

最近在作的有關於北京海淀智慧旅遊的一個項目，既然是旅遊項目，那麼涉及到地圖的操做也就是必然的事情了。前幾篇文章，主要是分享了在地圖上標記多個景點及其景點信息的技術。其實跟項目中仍是有一些不同的。項目中要求實時顯示景點的信息，根據實時數據，更新Marker的顏色（綠、橙、紅），以及實時更新景點Brand上的景點信息（遊客流量、溫馨度）。這些都沒有出如今文章中，文章只是從技術的角度來驗證的。javascript

今天主要要作的是地圖上的一個基本功能——交互搜索。css

其實官網上搜索的例子並非不少，並且真的不怎麼滴。不過做爲參考，仍是能夠的。點擊這裏查看「範圍查詢-指定分類id，關鍵字」代碼示例。若是沒有你想要的功能，那你就去官方API文檔中找吧，點擊這裏看搜索類API。html

先貼出個人搜索也代碼，很簡單，一個輸入框，一個搜索按鈕：java

<!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>後面。先來看看效果圖吧：jquery

（點擊這裏到網站上查看）

簡單說一下，

初始化的js，其中map的初始化天然就不用說了，可是多了一個sRender對象，這是一個搜索渲染類對象，就是把搜索結果渲染到地圖上。有興趣的能夠看看官方API文檔；
搜索的js，主要是調用了Search 對象的search方法。搜索參數的設定請參考API文檔；
清理的js，原本是隻調用sRender對象的clearResultFeatures()方法的，結果執行後發現地圖上的marker消失了，可是若是執行sRender.getMarkers()，卻發現marker對象還在，只是不在地圖上顯示了。可是仍是佔用着資源呢。因此我就把這個marker所有從sRender對象中清除了。
最後一個是從新設置中心點的js，雖然地圖會自動設定新的中心點，可是咱們後面還要作周邊搜索，必須先匹配最符合條件的結果做爲中心進行區域搜索，因此這這裏先把它作出來了。

若是想把搜索結果以列表的形式顯示出來，只要修改一下sRender對象的建立便可：

sRender=new sogou.maps.SearchRenderer({'panel':document.getElementById('result')});

這個result就是頁面上一個div的id。這樣就會自動把結果放入到這個div中了。

到此搜索功能就基本上完成了。接下來作一下週邊搜索的功能。最後再美化一版基本上的思路就是這個樣子，你們多多指點吧。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。