html5物理定位误差大 解决办法
学生党在做比赛作品，项目中需求要用到定位功能并以地图形式展现。所以思路就是用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
