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中了。

到此搜索功能就基本上完成了。接下来作一下周边搜索的功能。最后再美化一版基本上的思路就是这个样子，你们多多指点吧。