admin管理员组文章数量:1562477
- 准备工作
- 开始动工
- 总结
准备工作
- 百度地图API
JavaScript APIv2.0
- eclipse
eclipse-jee-kepler-SR2-win32-x86_64
- tomcat
apache-tomcat-7.0.55
- JQuery
jquery-1.7.2.js
- 手机一部
开始动工
一、申请密钥
从v1.5版本开始,百度地图的使用需要先申请密钥(ak)才能使用,所以我们需要先申请密钥。
申请密钥时需要注意:
应用名称需要和你后面的eclipse工程名统一
应用类型需要选择浏览器端
域名没有限制时输入*即可
密钥申请完成后如下所示:
切记应用名称和AK,切记应用名称和AK,切记应用名称和AK。重要的事重复三遍!!!
二、新建工程导入相关文件
新建web工程,并在WebContent目录下新建position.jsp用于定位,并导入jQuery文件
因为是用于手机端显示,所以需要禁止用户缩放页面,在head标签中加入如下标签:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
接着引入API和JQuery:
<script type="text/JavaScript" src="http://api.map.baidu/api?v=2.0&ak=申请的AK"></script>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
在body标签中加入div用于显示地图
<div id="allmap"></div>
最后设置div样式
<style type="text/css">
body, html,#allmap {
width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";
}
</style>
三、开始定位
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
补充一下:
1、最开始定位到天安门的原因,如果定位失败时,地图也会显示出来,用户友好操作
2、这里使用的是百度自己的定位geolocation类,所以返回的坐标是百度坐标,不需要转换,如果使用的是navigator.geolocation.getCurrentPosition(定位成功回调函数, 定位失败回调函数),这是调用的HTML5浏览器的定位,返回的是GPS(WGS-84)坐标,则需要转换坐标,否则定位误差很大,具体转换见总结
四、定位结果
将工程添加到tomcat,启动tomcat,将地址发送至手机,然后手机复制地址到浏览器打开即可。需要注意的是不能写localhost,而要用ip地址。例如:
http:192.168.0.171/yanphetMap/position.jsp
楼主tomcat配置的端口是80,所以访问省略了8080,如果你没有配置则需要加上8080。
到此为止,手机端浏览器定位结束。
总结
从最开始的密钥申请到定位完成,只希望梳理一下整个流程。也希望能帮到准备研究百度地图的小伙伴。最后,因为时间和能力有限,如有不足之处,请不吝赐教。谢谢!!
附:GPS坐标(WGS-84)–>百度坐标
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
convertor.translate(pointArr, 1, 5, 回调函数) 1代表GPS设备获取的坐标(待转换),5是百度经纬度坐标(转换目标) 。附上转换图
点击打开链接
本文标签: 浏览器地图手机APIJavaScript
版权声明:本文标题:【百度地图JavaScript API】手机端浏览器定位的实现 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1727475673a1116477.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论