文档章节

用javascript调用搜狗地图实现景点的显示

walk273
 walk273
发布于 2013/05/28 02:59
字数 725
阅读 298
收藏 8

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

java提供了rest服务的框架实现——jax-rs,可以较为轻松的建立一个webservice,工程目录如下:



我们用到的是搜狗地图的地址解析服务,可以通过一个地点的名称,来查询此景点的详细信息,主要是其地图坐标(当然还有其他服务,不止于此,我们只讨论用到的部分)

    服务可以通过如下方式请求:

http://api.go2map.com/engine/api/geocoder/json?city=北京市&addr=北京市海淀区中关村东路一号院

返回结果是一个json格式的地理信息:

{
"response":
{
"city":
"北京市",
"keyword":
"北京市海淀区中关村东路一号院",
"match":
"海淀区中关村东路一号院7号楼威盛大厦",
"province":
"北京市",
"x":
12949190.267684,
"y":
4837046.995794
},
"status":
"ok"
}

 xy值就是其坐标信息,有了这个坐标信息我们就可以在javascript代码中调用sogou地图api将该位置标注显示出来。

  代码实现:

返回html网页:
这部分主要是返回一个html网页,其中用javascript调用搜狗地图实现了景点的显示,实现难点在于对javascript不够熟悉,不过好在搜狗地图给出了比较详细的例子,介绍了各种api接口的使用方法,参考:http://map.sogou.com/api/documentation/javascript/api2.5/examples/index.html#welcome

可是实现将具有该功能的html页面写好,然后在程序加入实际景点的信息,组装成实际显示了具体景点标注的html返回到请求方。

使用方式:
在浏览器中输出url进行访问,形式为:http://[ip]:8080/sogouMap/services/travel?q=[景点名]

接受的参数为q=后面的字符串部分,参数既可以是景点,也可以是行程。
如果是查询景点,那么直接在景点名部分加入响应的景点即可,例如:

http://localhost:8080/sogouMap/services/travel?q=北京植物园,浏览器中将显示:

返回html网页:
这部分主要是返回一个html网页,其中用javascript调用搜狗地图实现了景点的显示,实现难点在于对javascript不够熟悉,不过好在搜狗地图给出了比较详细的例子,介绍了各种api接口的使用方法,参考:http://map.sogou.com/api/documentation/javascript/api2.5/examples/index.html#welcome

可是实现将具有该功能的html页面写好,然后在程序加入实际景点的信息,组装成实际显示了具体景点标注的html返回到请求方。

© 著作权归作者所有

walk273
粉丝 0
博文 13
码字总数 3372
作品 0
海淀
程序员
私信 提问
基于Html+js实现的瓦片式的Webgis栅格地图管理平台

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

成都领君科技
2012/04/04
2.3K
0
关于在安卓的内置浏览器上实现地图的拖动问题

以下是我自己写的一个简单的web地图,这个地图在Pc上可以实现鼠标拖动,但是在anroid里用其内置的浏览器打开时却不能触控拖动,相反在进入谷歌的web地图中却可以很轻松的拖动。请问各位,我这...

天朝搬砖工
2012/10/26
387
1
CoreThink&OpenCMF技术分享之:谷歌地图接入

其实如果产品涉及到国外,那Mapbox也是一个很好的选择,Google map在国内毕竟无法正常使用,关于mapbox的分享后面可以再做一下。欢迎交流,开源互联网产品开发框架CoreThink 谷歌地图接入指南...

CoreThink
2016/05/11
422
0
iOS--React Native浏览器插件

一:介绍 React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用...

展菲
2018/12/16
0
0
2016 年 11 月 12 个轻量级的 JavaScript 库

1. meSing.js meSing.js是一个一个JavaScript歌唱合成库,它使用Web Audio API的DSP功能与meSpeak.js语音合成库结合,为Web提供声乐合成器。 2. Flv.js flv.js是一个 HTML5 Flash Video (FLV...

pe_mail2006
2016/11/23
6.7K
12

没有更多内容

加载失败,请刷新页面

加载更多

nginx+tomcat配置https

1、nginx配置https和【proxy_set_header X-Forwarded-Proto $scheme;】 2、java代码: String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServe......

perofu
26分钟前
4
0
必看的Linux系统新手进阶老手心得

不知道从什么时候起,linux这个话题变得越来越普及,成为大家经常讨论的话题。无论在网络上还是实际生活中,竟然很多人都在纠结学习linux的问题。网络上给的答案千千万万,而却还有很多人踌躇...

Linux就该这么学
29分钟前
4
0
Spring Boot 配置元数据指南

1. 概览 在编写 Spring Boot 应用程序时,将配置属性映射到 Java bean 上是非常有用的。但是,记录这些属性的最好方法是什么呢? 在本教程中,我们将探讨 Spring Boot Configuration Proces...

liululee
32分钟前
3
0
foreach查找子类

$list = $menu_model -> menu_list();$parent_list = [];foreach ($list as $v){ if ($v['pid'] == 0) { $parent = $v; foreach ($list as $v1) ......

小小小壮
44分钟前
3
0
基于 HTML5 Canvas 实现的 TP-LINK 电信拓扑设备面板

前言 今天我们以真实的 TP-LINK 设备面板为模型,完成设备面板的搭建,和指示灯的闪烁和图元流动。 先来目睹下最终的实现效果:http://www.hightopo.com/demo/blog_tplink_20170511/index.h...

htdaydayup
50分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部