學生黨在做比賽作品，項目中需求要用到定位功能並以地圖形式展現。所以思路就是用h5的geolocation 獲取經緯度，通過百度地圖api將經緯度轉換成詳細的地址以及地圖。
在筆記本電腦做測試，定位總有超過500米以上的誤差。找資料得知
原因：
國內的地圖產品，其地理位置大多數都進行了GCJ-02加密，即加入隨機的偏差。
而html5原生的定位API獲取到的地理位置，是未經加密的。
因此，為了保證html5原生的定位API獲取到的地理位置在百度地圖上較為准確的解析，就需要用官方提供的轉換類。
由於國內地圖產品的地理位置普遍進行了GCJ-02加密
因此，在用一種地圖產品的API時，都應養成一個習慣，就是看看它們有沒有提供地理位置信息轉換的類。
所以，用geolocation獲取的經緯度直接用誤差會很大，要進行轉換，百度地圖提供了這個方法 ，Convertor（）。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Document</title> 6 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 7 8 <style> 9 body, html,#allmap {width: 100%;height: 800px;;overflow: hidden;margin:0;} 10 #golist {display: none;} 11 @media (max-device-width: 780px){#golist{display: block !important;}} 12 .container{width:1080px;margin:0 auto;} 13 .title{width:100%;text-align: center;} 14 h1{color:#2280E8;} 15 </style> 16 </head> 17 <body> 18 <div id="baidu_geo"></div> 19 <div class="content"> 20 <div id="allmap"></div> 21 </div> 22 23 <script src="//cdn.bootcss.com/jquery/2.1.0/jquery.js"></script> 24 <!--<script type="text/javascript" src="jquery-1.8.2.js"></script>--> 25 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=hCBcm8H8opRLdC0f6OibbGavC0pne1uc"></script> 26 <!--<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>--> 27 <!--<script src="convertor.js"></script>--> 28 <script type="text/javascript"> 29 30 function getLocation(){ 31 if (navigator.geolocation){ 32 navigator.geolocation.getCurrentPosition(showPosition,showError); 33 }else{ 34 alert("瀏覽器不支持地理定位。"); 35 } 36 } 37 getLocation(); 38 function showError(error){ 39 switch(error.code) { 40 case error.PERMISSION_DENIED: 41 alert("定位失敗,用戶拒絕請求地理定位"); 42 break; 43 case error.POSITION_UNAVAILABLE: 44 alert("定位失敗,位置信息是不可用"); 45 break; 46 case error.TIMEOUT: 47 alert("定位失敗,請求獲取用戶位置超時"); 48 break; 49 case error.UNKNOWN_ERROR: 50 alert("定位失敗,定位系統失效"); 51 break; 52 } 53 }; 54 55 function showPosition(position) { 56 var latlon = position.coords.latitude+','+position.coords.longitude; 57 console.log(latlon); 58 console.log("原始位置精度："+position.coords.accuracy); 59 //baidu 60 var url = "http://api.map.baidu.com/geocoder/v2/?ak=hCBcm8H8opRLdC0f6OibbGavC0pne1uc&callback=renderReverse&location="+latlon+"&output=json&pois=0"; 61 $.ajax({ 62 type: "GET", 63 dataType: "jsonp", 64 url: url, 65 beforeSend: function(){ 66 $("#baidu_geo").html('正在定位...'); 67 }, 68 success: function (json) { 69 console.log(json); 70 $("#baidu_geo").html(json.result.formatted_address); 71 var ggPoint = new BMap.Point(json.result.location.lng,json.result.location.lat);//創建標點 72 //地圖初始化 73 var bm = new BMap.Map("allmap"); 74 bm.centerAndZoom(ggPoint, 15); 75 bm.addControl(new BMap.NavigationControl());//控件 76 77 //添加gps marker和label 78 var markergg = new BMap.Marker(ggPoint); 79 bm.addOverlay(markergg); //添加GPS marker 80 var labelgg = new BMap.Label("未轉換的原始坐標（錯誤）",{offset:new BMap.Size(20,-10)}); 81 markergg.setLabel(labelgg); //添加GPS label 82 83 84 //坐標轉換完之后的回調函數 85 translateCallback = function (data){ 86 if(data.status === 0) { 87 var marker = new BMap.Marker(data.points[0]); 88 bm.addOverlay(marker); 89 var label = new BMap.Label("轉換后的百度坐標（正確）",{offset:new BMap.Size(20,-10)}); 90 marker.setLabel(label); //添加百度label 91 bm.setCenter(data.points[0]); 92 } 93 } 94 var convertor = new BMap.Convertor();//這個類就是轉換的對象 95 var pointArr = []; 96 pointArr.push(ggPoint); 97 convertor.translate(pointArr, 1, 5, translateCallback)//通過調用回調函數來進行轉換。 98 }, 99 error: function (XMLHttpRequest, textStatus, errorThrown) { 100 $("#baidu_geo").html(latlon+"地址位置獲取失敗"); 101 } 102 }); 103 }; 104 105 </script> 106 </body> 107 </html>
效果，未轉碼原始經緯度和轉碼后的正確地址相差甚遠。
參考了 官方api文檔 http://lbsyun.baidu.com/jsdemo.htm#a5_2