【百度地图JavaScript API】手机端浏览器定位的实现

• 准备工作
• 开始动工
• 总结

---

准备工作

• 百度地图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
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)–>百度坐标

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]);
      }
    })
}
 
 
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是百度经纬度坐标（转换目标） 。附上转换图

点击打开链接