關於百度地圖API的地圖坐標轉換問題


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

 

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM