学生党在做比赛作品，项目中需求要用到定位功能并以地图形式展现。所以思路就是用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. 十七、ThreadPoolExecutor线程池

    一.简介 executor接口 executor接口在JDK的java.util.concurrent包下,它只有一个抽象方法: void execute(Runnable command); 这意味 ...

  2. 高并发系列之——缓存中间件Redis

    1 概念和使用场景 下载路径 2 基本存储类型 String List Set SortedSet Hash 3 事务 单线程执行,即只能保证一个client发起的事务中的命令可以连续的执行,而中间不 ...

  3. spring中AOP的AspectJ的Execution表达式

    AspectJ的Execution表达式: 使用springAOP定义pointcut里面的execution表达式: execution()函数是常用的切点函数 "execution(* ...

  4. SQL Server 2008各版本介绍区别(包含企业版 开发者版 标准版 Web版 工作组版 Express版 Compact版)

    SQL Server 2008分为SQL Server 2008企业版.标准版.工作组版.Web版.开发者版.Express版.Compact 3.5版,其功能和作用也各不相同,其中SQL Serve ...

  5. sql 模糊搜素拼接

    if($irb_order!=''){ $condition .= " AND d.irb_order like '%".$irb_order."%'"; } ...

  6. Bzoj4044 Virus synthesis

    题意 你要用 \(ATGC\) 四个字母用两种操作拼出给定的串: 将其中一个字符放在已有串开头或者结尾 将已有串复制,然后 \(reverse\) ,再接在已有串的头部或者尾部 一开始已有串为空.求最 ...

  7. 转：drupal sql查询count

    Count queries Count queries Any query may have a corresponding "count query". The count qu ...

  8. (C#) 多线程访问int, bool 等值类型变量

    参考: https://stackoverflow.com/questions/154551/volatile-vs-interlocked-vs-lock/154803

  9. mac下 IDEA 的pom下 出现 Cannot access in offline mode 问题

    在mac下 配置完maven后发现总是不能引入最新的jar包,google了好久总算找到解决办法: 默认带有work offline ,不清楚这个是干嘛用的.勾选掉 了就行了.

  10. 本地调试接口返回信息不对 以及 jar冲突问题

    今天下午在本地调试的时候碰到个很奇怪的问题:服务调用接口,返回的明明是有数据的,然后通过gson转换对象后,对象里面并没有自己想要的数据.看了代码什么的都没有问题.思考到底是哪里出了问题,想了半天想到 ...