学生党在做比赛作品，项目中需求要用到定位功能并以地图形式展现。所以思路就是用h5的geolocation 获取经纬度，通过百度地图api将经纬度转换成详细的地址以及地图。
在笔记本电脑做测试，定位总有超过500米以上的误差。找资料得知
原因：
国内的地图产品，其地理位置大多数都进行了GCJ-02加密，即加入随机的偏差。

而html5原生的定位API获取到的地理位置，是未经加密的。

因此，为了保证html5原生的定位API获取到的地理位置在百度地图上较为准确的解析，就需要用官方提供的转换类。

由于国内地图产品的地理位置普遍进行了GCJ-02加密

因此，在用一种地图产品的API时，都应养成一个习惯，就是看看它们有没有提供地理位置信息转换的类。

所以，用geolocation获取的经纬度直接用误差会很大，要进行转换，百度地图提供了这个方法 ，Convertor（）。

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8" />

     <title>Document</title>

     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  

     <style>

         body, html,#allmap {width: 100%;height: 800px;;overflow: hidden;margin:0;}

         #golist {display: none;}

         @media (max-device-width: 780px){#golist{display: block !important;}}

         .container{width:1080px;margin:0 auto;}

         .title{width:100%;text-align: center;}

         h1{color:#2280E8;}

     </style>

 </head>

 <body>

     <div id="baidu_geo"></div>

     <div class="content">

         <div id="allmap"></div>

     </div>

     <script src="//cdn.bootcss.com/jquery/2.1.0/jquery.js"></script>

     <!--<script type="text/javascript" src="jquery-1.8.2.js"></script>-->

     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=hCBcm8H8opRLdC0f6OibbGavC0pne1uc"></script>

     <!--<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>-->

     <!--<script src="convertor.js"></script>-->

     <script type="text/javascript">

         function getLocation(){

             if (navigator.geolocation){

                     navigator.geolocation.getCurrentPosition(showPosition,showError);

                 }else{

                     alert("浏览器不支持地理定位。");

             }

         }

         getLocation();

         function showError(error){

             switch(error.code) {

                 case error.PERMISSION_DENIED:

                     alert("定位失败,用户拒绝请求地理定位");

                     break;

                 case error.POSITION_UNAVAILABLE:

                     alert("定位失败,位置信息是不可用");

                     break;

                 case error.TIMEOUT:

                     alert("定位失败,请求获取用户位置超时");

                     break;

                 case error.UNKNOWN_ERROR:

                     alert("定位失败,定位系统失效");

                     break;

             }

         };

         function showPosition(position) {

             var latlon = position.coords.latitude+','+position.coords.longitude;

                console.log(latlon);

                console.log("原始位置精度："+position.coords.accuracy);

             //baidu

             var url = "http://api.map.baidu.com/geocoder/v2/?ak=hCBcm8H8opRLdC0f6OibbGavC0pne1uc&callback=renderReverse&location="+latlon+"&output=json&pois=0";

             $.ajax({

                 type: "GET",

                 dataType: "jsonp",

                 url: url,

                 beforeSend: function(){

                     $("#baidu_geo").html('正在定位...');

                 },

                 success: function (json) {

                          console.log(json);

                                      $("#baidu_geo").html(json.result.formatted_address);

                     var ggPoint = new BMap.Point(json.result.location.lng,json.result.location.lat);//创建标点

                     //地图初始化

                     var bm = new BMap.Map("allmap");

                     bm.centerAndZoom(ggPoint, 15);

                     bm.addControl(new BMap.NavigationControl());//控件

                     //添加gps marker和label

                     var markergg = new BMap.Marker(ggPoint);

                     bm.addOverlay(markergg); //添加GPS marker

                     var labelgg = new BMap.Label("未转换的原始坐标（错误）",{offset:new BMap.Size(20,-10)});

                     markergg.setLabel(labelgg); //添加GPS label

                     //坐标转换完之后的回调函数

                     translateCallback = function (data){

                       if(data.status === 0) {

                         var marker = new BMap.Marker(data.points[0]);

                         bm.addOverlay(marker);

                         var label = new BMap.Label("转换后的百度坐标（正确）",{offset:new BMap.Size(20,-10)});

                         marker.setLabel(label); //添加百度label

                         bm.setCenter(data.points[0]);

                       }

                     }

                     var convertor = new BMap.Convertor();//这个类就是转换的对象

                     var pointArr = [];

                     pointArr.push(ggPoint);

                     convertor.translate(pointArr, 1, 5, translateCallback)//通过调用回调函数来进行转换。

                 },

                 error: function (XMLHttpRequest, textStatus, errorThrown) {

                     $("#baidu_geo").html(latlon+"地址位置获取失败");

                 }

             });

         };

     </script>

 </body>

 </html>

效果，未转码原始经纬度和转码后的正确地址相差甚远。

参考了 官方api文档 http://lbsyun.baidu.com/jsdemo.htm#a5_2

html5物理定位误差大 解决办法的更多相关文章

  1. 【Thymeleaf】Thymeleaf模板对没有结束符的HTML5标签解析出错的解决办法

    解决方案 spring: thymeleaf: mode: LEGACYHTML5 <dependency> <groupId>net.sourceforge.nekohtml ...

  2. 【转】【selenium+Python WebDriver】之元素定位不到解决办法

    感谢: 煜妃的<Python+Selenium定位不到元素常见原因及解决办法(报:NoSuchElementException)> ClassName定位报错问题:<[Python] ...

  3. Python Selenium定位元素常用解决办法

       在做web应用的自动化测试时,定位元素是必不可少的,这个过程经常会碰到定位不到元素的情况(报selenium.common.exceptions.NoSuchElementException), ...

  4. Linux下安装python的gmpy2库及遇到无法定位软件包的解决办法

    gmpy2需要gmp.h &mpfr.h &mpc.h 安装命令: sudo apt-get install libmpfr-dev libmpc-dev  成功之后再输入安装命令: ...

  5. MS SQL 数据库所在C盘变得很大解决办法

    C:\Program Files\Microsoft SQL Server\MSSQL.1\MSSQL\LOG 一般是这个文件夹里的ERRORLOG变得很大.所以要清理. 执行一次EXEC sp_cy ...

  6. vue+ivew-admin开发项目，内存占用过大解决办法

    项目用的ivew+admin ivewUI,直接从github上拉下来用的,配置也没改,我们页面比较多,大该30个页面的样子,一启用,我们的电脑就卡了,然后,看一下,内存占用 1.5G+了,我们电脑4 ...

  7. 【Python】Selenium元素定位错误之解决办法

    当使用class定位元素时发现报错: 错误信息:selenium.common.exceptions.InvalidSelectorException: Message: Compound class ...

  8. Jenkins占用内存较大解决办法

    主机启动jenkins后导致内存占用较大 登录主机top按键M按消耗内存排序 未调优前查看进程 修改配置文件 /usr/local/jenkins-tomcat/bin/catalina.sh 增加一 ...

  9. Python浮点数（小数）运算误差的原因和解决办法

    原因解释:浮点数(小数)在计算机中实际是以二进制存储的,并不精确.比如0.1是十进制,转换为二进制后就是一个无限循环的数:0.0001100110011001100110011001100110011 ...

随机推荐

  1. NSURLSession和NSURLConnection

    iOS9.0之后NSURLConnection被注销,采用NSURLSession,先介绍NSURLSession,然后介绍NSURLConnection 1.NSURLSession: post请求 ...

  2. lnmp环境 开启pathinfo

    thinkphp url访问模式中 默认的pathinfo不起作用? 1.检查你的tp配置文件config.php URL模式 'url_model'=> '1', //URL模式 即pathi ...

  3. JavaScript的进阶之路（五）理解数组1

    数组是值得有序结合,每个值叫做一个元素,每个元素的位置称为索引,索引从0开始. 在JavaScript中,数组是对象的特殊形式.继承自Array.prototype中的属性,有丰富的数组操作方法. 通 ...

  4. js 数组转json，json转数组

    //数组转json串var arr = [1,2,3, { a : 1 } ];JSON.stringify( arr ); //json字符串转数组var jsonStr = '[1,2,3,{&q ...

  5. Java学习笔记(5)----使用正则表达式解决Google Code Jam Qualification2009赛题 Alien Language

    原题地址:https://code.google.com/codejam/contest/90101/dashboard#s=p0 题目描述: Problem After years of study ...

  6. AutoCAD LoadLibrary Failed with error 126 Message

    LoadLibrary Failed with error 126 Message BY C3DISH ON 26 MAY, 2013 · ADD COMMENT I wanted to post a ...

  7. QTableview 获取鼠标坐标的item（QModelIndex）

    要实现的功能是QTableview中Item项上右键弹出菜单这就必然要判断点击右键时鼠标指针是否在QTableView的Item上 如果是QTableWidget可以用itemAt来判断QTableV ...

  8. HTML 的 style 属性

    style 属性用于改变 HTML 元素的样式. This text is in Verdana and red This text is in Times and blue This text is ...

  9. LeetCode33 搜索旋转排序数组

    搜索旋转排序数组 题目描述: 假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] ). 搜索一个给定的目标 ...

  10. linux，强大的history命令

    如果你经常使用 Linux 命令行,那么使用 history(历史)命令可以有效地提升你的效率.本文将通过实例的方式向你介绍 history 命令的 15 个用法. 使用 HISTTIMEFORMAT ...