我在之前的文章利用html5获取经纬度并且在百度地图中显示位置中使用了百度地图的API来显示html5获取的地理位置，在文中我说过这样的话，我说百度地图的准确度不怎么精确，偏差很大。这里我要更正下：
国际经纬度坐标标准为WGS-84,国内必须至少使用国测局制定的GCJ-02,对地理位置进行首次加密。百度坐标在此基础上，进行了BD-09二次加密措施,更加保护了个人隐私。百度对外接口的坐标系并不是GPS采集的真实经纬度，需要通过坐标转换接口进行转换。
由此可以看出小编之前冤枉了百度地图，所以如果对您有误导还请见谅。所以写了篇关于百度地图API坐标转换的文章，并且对之前的模型做了修正。
实现代码：
1 //在百度 map中显示地址
2 var map = new BMap.Map("map_canvas");
3 var point = new BMap.Point(longitudeP , latitudeP); // 创建点坐标
4 map.centerAndZoom(point, 15);// 初始化地图，设置中心点坐标和地图级别
5 var marker = new BMap.Marker(point);
6 map.addOverlay(marker);
7 BMap.Convertor.translate(point,0,translateCallback); //真实经纬度转成百度坐标
回调函数代码：
1 //坐标转换完之后的回调函数
2 function translateCallback(point1){
3 var marker1 = new BMap.Marker(point1);
4 map.addOverlay(marker1);
5 var label = new BMap.Label("转换后的百度坐标",{offset:new BMap.Size(20,-10)});
6 marker1.setLabel(label); //添加百度label
7 map.setCenter(point1);
8 }
这是新的效果图:
可以看出转换出的效果还是相当精确的,并且从我这里的demo来看要比谷歌地图精确的多！所以如果也有像我一样的用户发现调用baidu map坐标有偏差的话，很有可能就是没有进行坐标转换。
关于这个demo：
demo代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>GIS开发利用html5获取经纬度并在百度地图中查看</title>
7 <!--加载百度 map api-->
8 <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=8827ee39511568ac0705d037d67b2624"></script>
9 <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
10 </head>
11
12 <body>
13 <span id="support">将下面的经纬度输入谷歌地图：</span>
14 <div id="show">
15 纬度：<span id="latitude"></span><br />
16 经度：<span id="longitude"></span><br />
17 准确度：<span id="accuracy"></span>
18 </div>
19 <div id="map_canvas" style="width:500px; height:500px;"></div>
20 <script type="text/javascript">
21 var doc = document,
22 latitude = doc.getElementById(‘latitude‘),
23 longitude = doc.getElementById(‘longitude‘),
24 accuracy = doc.getElementById(‘accuracy‘),
25 support = doc.getElementById(‘support‘),
26 showDiv = doc.getElementById(‘show‘);
27 var map = new BMap.Map("map_canvas");
28 function lodeSupport(){
29 if(navigator.geolocation){
30 support.innerHTML = ‘将下面的经纬度输入谷歌地图(纬度 经度)查看自己位置：‘;
31 showDiv.style.display = ‘block‘;
32 navigator.geolocation.getCurrentPosition(updataPosition);
33 }else{
34 support.innerHTML = ‘对不起，浏览器不支持！‘;
35 showDiv.style.display = ‘none‘;
36 }
37 }
38 function updataPosition(position){
39 var latitudeP = position.coords.latitude,
40 longitudeP = position.coords.longitude,
41 accuracyP = position.coords.accuracy;
42 latitude.innerHTML = latitudeP;
43 longitude.innerHTML = longitudeP;
44 accuracy.innerHTML = accuracyP;
45 //在百度 map中显示地址
46
47 var point = new BMap.Point(longitudeP , latitudeP); // 创建点坐标
48 map.centerAndZoom(point, 15);// 初始化地图，设置中心点坐标和地图级别
49 var marker = new BMap.Marker(point);
50 map.addOverlay(marker);
51 BMap.Convertor.translate(point,0,translateCallback); //真实经纬度转成百度坐标
52
53 }
54 //坐标转换完之后的回调函数
55 function translateCallback(point1){
56 var marker1 = new BMap.Marker(point1);
57 map.addOverlay(marker1);
58 var label = new BMap.Label("转换后的百度坐标",{offset:new BMap.Size(20,-10)});
59 marker1.setLabel(label); //添加百度label
60 map.setCenter(point1);
61 }
62
63 window.addEventListener(‘load‘, lodeSupport , true);
64 </script>
65 </body>
66 </html>
转载自：http://malagis.com/baidu-maps-api-map-coordinate-conversion.html
时间： 2024-08-03 01:18:11