我在之前的文章利用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
