学生党在做比赛作品，项目中需求要用到定位功能并以地图形式展现。所以思路就是用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. Linux下一个最简单的不依赖第三库的的C程序（2）

    一个最简单的C程序,如下: main.c: int main() { char *str = "Hello World"; ; } 在64位平台上编译一个32位的程序,如下:(32 ...

  2. SpringBoot管理Banner

    一.引言 在springboot项目启动的时候,会在console控制台中打印出一个SPRING的图案.有时候为了减少日志输出以及控制台的输出,就需要将这些给去除:有时候需要换上个人的标签等标识,就需 ...

  3. jetbrains激活 webstorm激活 webstorm激活码

    License Activation的破解方式无效时,请采用以下方法1. 把下载的破解补丁放在你的idea的安装目录下的bin的目录下面(如下图所示),本文示例为C:\Program Files\Je ...

  4. 《JavaWeb从入门到改行》关于BaseServlet那些事

    @为什么需要BaseServlet?  我们知道一个POST或者GET提交对应着一个Servlet, 无数的提交会让Servlet页面增加,我们希望一个Servlet就能处理很多提交的请求. @Bas ...

  5. Thymeleaf学习记录（6）--迭代及条件语法

    迭代: 条件选择: IF-THEN: (if) ? (then) IF-THEN-ELSE: (if) ? (then) : (else) 默认: (value) ?: (defaultvalue) ...

  6. HTML5拖拽/拖放(drag & drop)详解

    H5中拖拽属性: draggable: auto | true | false   拖动事件:   - dragstart 在元素开始被拖动时触发 - dragend 在拖动操作完成时触发 - dra ...

  7. Maven学习总结（八）：Myecplise中配置maven

    第一步:下载maven安装包,配置环境变量M2_HOME;变量值为maven的解压目录. 第二步:在eclipse4.0之前的版本需要安装maven插件,方法即:将maven插件包复制到eclipse ...

  8. Maven学习总结（三）：修改从Maven中心仓库下载到本地的jar包的默认存储位置

    一:修改从Maven中心仓库下载到本地的jar包的默认存储位置 从Maven中心仓库下载到本地的jar包的默认存放在”${user.home}/.m2/repository”中,${user.home ...

  9. 使用react——解决this.props.history.push无法跳转的问题

    转自: https://blog.csdn.net/yingzizizizizizzz/article/details/78751305 场景: 一个组件中,含有ul展开数组的组件,在每一行中,都能点 ...

  10. IEC62304软件维护框架

    软件维护计划的任务 建立接收.记录.评估.解决和追踪医疗器械软件发行后的反馈 制定确认反馈是否是问题的标准 使用风险管理过程 使用配置管理过程 制定升级.补丁以及遗留问题修正计划 问题和修改分析的任务 ...