GIS(五)——完成js版搜狗地图基本交互搜索功能

最后更新于:2022-04-01 07:03:20

     最近在做的有关于北京海淀智慧旅游的一个项目,既然是旅游项目,那么涉及到地图的操作也就是必然的事情了。前几篇文章,主要是分享了在地图上标记多个景点及其景点信息的技术。其实跟项目中还是有一些不一样的。项目中要求实时显示景点的信息,根据实时数据,更新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>后面。先来看看效果图吧: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-02-18_56c53c251331e.jpg) ([点击这里到网站上查看](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中了。      到此搜索功能就基本上完成了。接下来做一下周边搜索的功能。最后再美化一版基本上的思路就是这个样子,大家多多指点吧。
';