国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > 互联网 > GIS(六)――实现js版搜狗地图周边搜索功能

GIS(六)――实现js版搜狗地图周边搜索功能

来源:程序员人生   发布时间:2014-10-06 08:00:01 阅读次数:3114次

       在上一篇文章《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个问题。敬请期待吧。


       
生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生