学生党在做比赛作品，项目中需求要用到定位功能并以地图形式展现。所以思路就是用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. 三：Bootstrap-js插件

    模式框: <button class="btn btn-default btn-lg" data-toggle="modal" data-target=& ...

  2. ZOJ Problem Set - 2818

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1818 一开始想着用循环做,看了别人的解法才发现根本没必要,比较根号n就行了 # ...

  3. High Performance MySQL笔记：count

    在SQL中使用count()好像是非常自然的事情: SELECT COUNT(*) FROM TABLE_NAME; 有时候确实会想过,count(*)和单独的count(column_name)有什 ...

  4. vue如何下载报表

    _export() { const _c = this.$createElement; this.$msgbox({ title: '请确认', showCancelButton: true, con ...

  5. 【转】老生常谈-从输入url到页面展示到底发生了什么

    今天看到了一篇很详细地解释了从输入url到页面展示过程的文章,好文章不能错过,所以转到自己这里来了. 原文地址:老生常谈-从输入url到页面展示到底发生了什么 以下为原文: 刚开始写这篇文章还是挺纠结 ...

  6. CSS中的onmouseover和hover有什么区别

    它们一样是因为:都是鼠标落上去的时候触发的.它们不一样是因为:onmousemove是javascript里面的,他可以触发js命令,但是hover做不到,hover只是css样式的类,只能定义样式. ...

  7. ORACLE数据仓库学习记录

    一.数据仓库安装 安装ORACLE DATABASE 10g Release 2 ORACLE数据库版本是:10.2.0.1.0(服务器).执行基本安装(安装全部的组件)并创建示例数据库. 安装ORA ...

  8. MUI框架-13-使用百度地图 API（图文教程）

    MUI框架-13-使用百度地图 API(图文教程) 后面有实例,转载请注明出处 一.申请百度地图权限 1.打开 百度地图开放平台:http://lbsyun.baidu.com/apiconsole/ ...

  9. 同步（Synchronous）和异步（Asynchronous）的概念

    web项目中的同步与异步 在我们平时的web项目开发中会经常听到ajax请求这样一个称呼,在web项目中可以通过js或者jquery发送同步请求又或者异步请求,同步请求呢往往代表着你必须等待这次请求结 ...

  10. 爬虫day03之scrapy安装与使用

    参考博客 技术问题不要问,业务问题可以问是不是有一种更好的方法? scrapy windows安装 1. 安装scrapy 参考博客 https://www.cnblogs.com/wupeiqi/a ...