GIS（六）——实现js版搜狗地图周边搜索功能

在上一篇文章《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" οnclick="search_area('1228,1403,1330,1332')" value="周边餐饮" /><input type="button" οnclick="search_area('97,1264,1262')" value="周边公交" /><input type="button" οnclick="search_area('83,1321,1259')" value="周边商场" /><input type="button" οnclick="search_area('C_32')" value="周边酒店" /><input type="button" οnclick="search_area('1261')" value="周边医院" />

效果图如下：

点击这里到网站上查看

周边搜索和关键字搜索都是同一个，只不过设定的参数不一致。而且我可以同时设定关键字和周边搜索，进行范围更小更精确的搜索。只是用的话，其实没什么太大的难度，只要按照官方的api文档和示例代码就可以了解怎么开发了。

上面提到的都是从技术的角度来验证问题，如果真正使用的时候，最起码还是要提供智能提示的功能。界面也不能这么简陋，下一篇文章，我将解决这2个问题。敬请期待吧。

GIS（六）——实现js版搜狗地图周边搜索功能相关推荐

GIS（四）——为js版搜狗地图添加边界+Marker和Brand的最终美化版
在<GIS(三)--优化js版搜狗地图的brand标牌样式>中,分享了一下Brand样式的修改.现在把这几次Marker和Brand的修改统一再美化一下,算作一个终极优化版吧. 这次优化的 ...
GIS（二）——在js版搜狗地图上添加brand标牌
在上一篇博文中,我在搜狗地图上添加了Marker标记,但是在用户体验度上还是不够的,如果想了解某些信息,你得把鼠标指向marker,才能看到title里的值.有没有一种可以直接显示在marker上的东 ...
GIS（五）——完成js版搜狗地图基本交互搜索功能
最近在做的有关于北京海淀智慧旅游的一个项目,既然是旅游项目,那么涉及到地图的操作也就是必然的事情了.前几篇文章,主要是分享了在地图上标记多个景点及其景点信息的技术.其实跟项目中还是有一些不一样的.项目 ...
GIS（三）——优化js版搜狗地图的brand标牌样式
从上一篇博文的效果图中,我们看到有几个相近的brand标牌给相互遮挡住了,不能完整的显示.怎么处理一下呢?今天我们就来研究一下这个解决方案. 其实要想不被遮挡,可以让这几个brand位置变动一下,而不 ...
百度地图api周边搜索功能
利用百度地图api周边搜索功能,实现点击切换周边类型显示 <!DOCTYPE html> <html lang="zh-CN"> <head>& ...
百度地图实现普通地图、定位、周边搜索功能
//--------------一下是普通地图的实现----------------------------------- 1:打开百度地图APi进去,如果没有注册过的需要注册,注册过的登录进入 2: ...
uni-app 小程序使用腾讯地图完成搜索功能
前言使用uni-app开发小程序时候使用腾讯地图原生SDK是,要把原生写法转成vue写法在这记录一下. 我们需要注意的是使用高德地图时我们不仅要引入SDK,还要再uni-app中配置允许使用. 由于 ...
java安卓百度地图查找便利店_Android 百度地图POI搜索功能实例代码
在没介绍正文之前先给大家说下poi是什么意思. 由于工作的关系,经常在文件中会看到POI这三个字母的缩写,但是一直对POI的概念和含义没有很详细的去研究其背后代表的意思.今天下班之前,又看到了POI这 ...
Node.js实现网络新闻爬虫及搜索功能（一）
Node.js实现网络新闻爬虫及搜索功能(一) Node.js实现网络新闻爬虫及搜索功能(一) 项目要求一.爬虫部分 1. 引入相关包 2. 建立数据库连接 3. 爬取并解析网页首页 4. 爬取并解 ...

GIS（六）——实现js版搜狗地图周边搜索功能

GIS（六）——实现js版搜狗地图周边搜索功能相关推荐

最新文章

热门文章