文档章节

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

白志华
 白志华
发布于 2015/10/18 10:54
字数 933
阅读 11
收藏 0

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


       

版权声明:本文为博主原创文章,未经博主允许不得转载。

本文转载自:http://blog.csdn.net/xiaoxian8023/article/details/39614855

共有 人打赏支持
白志华
粉丝 29
博文 265
码字总数 57524
作品 0
长沙
程序员
用javascript调用搜狗地图实现景点的显示

由于课程需要,最近做了搜狗地图服务的接入工作,要在地图上标注出景点位置,现略做总结,以备查阅。(部署该服务到Tomcat中的时候中文总是乱码,纠结了半天,最后不得不show in Eclipse) ja...

walk273
2013/05/28
0
0
云 GIS 网络客户端开发平台 - iClient-JS

SuperMap iClient JavaScript (简称 iClient-JS )是云 GIS 网络客户端开发平台。基于现代 Web 技术栈全新构建,是 SuperMap 云四驾马车和在线 GIS 平台系列产品的统一 JS 客户端。集成了领先...

ahnan
2017/12/04
0
5
WEB GIS 开发框架 mapbox-gl-js v0.46.beta1 发布

WEB GIS 开发框架 mapbox-gl-js v0.46.beta1 已发布。 Mapbox GL JS 是一个 JavaScript 库,使用 WebGL 渲染交互式矢量瓦片地图和栅格瓦片地图。WebGL 渲染意味着高性能,MapboxGL 能够渲染大...

达尔文
06/15
0
0
【高德LBS开源组件大赛】美食街-同城在线订餐

应用名称 美食街同城在线订餐网站 应用地址 http://msj.pw 应用说明 以地图为载体,以GIS为基础数据驱动,方便用户在选择餐馆的时候直观了解送餐的时间,让快餐真正的“快”起来。 应用所使用...

铂金小猪
2014/08/31
0
7
基于Html+js实现的瓦片式的Webgis栅格地图管理平台

基于Html+js实现的Webgis栅格平台 成都领君科技提供的基于HTML5+js开发的瓦片式地图发布平台,适用于几乎所有浏览器(IE6+,遨游,火狐,搜狗,谷歌,360,世界之窗,Opera等)。功能模块包括如...

成都领君科技
2012/04/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Mac OS X下Maven的安装与配置

Mac OS X 安装Maven: 下载 Maven, 并解压到某个目录。例如/Users/robbie/apache-maven-3.3.3 打开Terminal,输入以下命令,设置Maven classpath $ vi ~/.bash_profile 添加下列两行代码,之后...

TonyStarkSir
今天
3
0
关于编程,你的练习是不是有效的?

最近由于工作及Solution项目的影响,我在重新学习DDD和领域建模的一些知识。然后,我突然就想到了这个问题,以及我是怎么做的? 对于我来说,提升技能的项目会有四种: 纯兴趣驱动的项目。即...

问题终结者
今天
4
0
打开eclipse出现an error has occurred see the log file

解决方法: 1,打开eclipse安装目录下的eclipse.ini文件; 2,打开的文本文件最后添加一行 --add-modules=ALL-SYSTEM 3,保存重新打开Eclipse。...

任梁荣
昨天
4
0
搞定Northwind示例数据库,无论哪个版本的SQLServer都受用

Northwind数据库 从这里可以找到突破口: http://social.msdn.microsoft.com/Forums/zh-CN/Vsexpressvb/thread/8490a1c6-9018-40c9-aafb-df9f79d29cde 下面是MSDN: http://msdn2.microsoft......

QQZZFT
昨天
1
0
mysql主从同步,安装配置操作

准备 两台mysql服务,我这里准备了如下: 主库:192.168.176.128 从库:192.168.176.131 如何在Linux上安装mysql服务,请看https://blog.csdn.net/qq_18860653/article/details/80250499 操作...

小致dad
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部