【百度地图JavaScript API】手机端浏览器定位的实现
来源:互联网 发布:阿里云网站怎么上线 编辑:程序博客网 时间:2024/05/16 16:37
- 准备工作
- 开始动工
- 总结
准备工作
- 百度地图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.com/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>
三、开始定位
<script type="text/javascript">var map = new BMap.Map("allmap");//创建地图实例//页面初始化$(function() { //初始化地图 默认加载北京天安门 var point = new BMap.Point(116.331398,39.897445); map.centerAndZoom(point,16);//初始化地图,point为中心点,缩放级别为16 //判断手机浏览器是否支持定位 if(navigator.geolocation){ var geolocation = new BMap.Geolocation();//创建定位实例 geolocation.getCurrentPosition(showLocation,{enableHighAccuracy: true});//enableHighAccuracy 要求浏览器获取最佳结果 }else{ map.addControl(new BMap.GeolocationControl());//添加定位控件 支持定位 }});//处理定位后的信息function showLocation(r){ if(this.getStatus() == BMAP_STATUS_SUCCESS){//定位成功 //新建中心点 并将地图中心移动过去 var centerPoint = new BMap.Point(r.longitude,r.latitude); map.panTo(centerPoint); map.setCenter(centerPoint); //新建标注 var mk = new BMap.Marker(centerPoint); mk.disableDragging();// 不可拖拽 map.addOverlay(mk); } else { alert('failed'+this.getStatus());//定位失败 } }</script>
补充一下:
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)–>百度坐标
function translate(point){ var convertor = new BMap.Convertor();//实例转换器 var pointArr = []; pointArr.push(point);//待转换的坐标 可批量 convertor.translate(pointArr, 1, 5, function (data){ if(data.status === 0) { var marker = new BMap.Marker(data.points[0]);//转换成功后的坐标 map.addOverlay(marker); map.setCenter(data.points[0]); } })}
convertor.translate(pointArr, 1, 5, 回调函数) 1代表GPS设备获取的坐标(待转换),5是百度经纬度坐标(转换目标) 。附上转换图
- 【百度地图JavaScript API】手机端浏览器定位的实现
- 【百度地图JavaScript API】手机端浏览器定位的实现
- 百度地图api手机浏览器定位
- 百度地图----浏览器定位API
- 百度地图API的IP定位城市和浏览器定位
- 百度地图Javascript Api定位
- 手机自动定位 百度地图API使用的文章
- 手机自动定位 百度地图API使用的文章
- 手机端GPS定位结合百度地图实现定位
- C#-winform地图定位的实现-百度地图API
- Arcgis API for JavaScript在地图上实现手机定位信息的追踪显示
- 百度地图API浏览器端的使用
- 使用百度地图API实现定位的效果。
- 百度地图api实现的定位,导航,附近搜索
- 百度地图api web获取当前位置浏览器JavaScript定位javaweb jquery
- 百度地图API的IP定位城市和浏览器定位(转)
- 百度地图API的IP定位城市和浏览器定位(转)
- 集成百度地图API实现定位
- 【OpenCV第一篇】安装OpenCV
- vc++给控件添加消息和函数
- Android Studio 1.5.1更新说明与下载地址
- 函数与递归练习
- 程序员未来发展三大方向
- 【百度地图JavaScript API】手机端浏览器定位的实现
- 简单算法—字符串处理
- String与StringBuffer、StringBuilder的区别
- Android 的设置项 I-Create Settings
- 剑指offer系列之二十五:二叉搜索树与双向链表
- 小白学算法2.8——计数排序
- kendo grid显示行号/序号列(二)
- Scenario Groups各个状态代表的含义
- 并发调度的可串行性