学生党在做比赛作品，项目中需求要用到定位功能并以地图形式展现。所以思路就是用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. 用JavaScript将数字转换为大写金额(收藏)

    (非原创, 来自网络,仅作收藏) var digitUppercase = function(n) { var fraction = ['角', '分']; var digit = [ '零', '壹 ...

  2. java设计模式-----5、原型模式

    原型(Prototype)模式是一种对象创建型模式,他采取复制原型对象的方法来创建对象的实例.使用原型模式创建的实例,具有与原型一样的数据. 原型模式的特点: 1.由原型对象自身创建目标对象.也就是说 ...

  3. java 简单计算器

    package com.direct.demo; import java.text.DecimalFormat; import java.util.Scanner; public class Calc ...

  4. C#-创建并添加TXT文件

    public static void WriteToText(string txtContent, string txtPath) { using (FileStream fs = new FileS ...

  5. windows10（本机）与VirtualBox中CentOS7(虚拟机）互相访问总结

    先把我这里的环境说下: 本机(windows10),发布了一个tomcat服务:http://192.168.0.106:8080/axis/services/VPMService?wsdl 如下图: ...

  6. 解决ArcMap启动时只停留在初始化界面的方法

    方法1 修改环境变量TEMP和TMP为C:\Temp 重启ArcMap. 方法2 关闭系统进程Print Spooler. 打开C:\WINDOWS\system32\spool\PRINTERS,删 ...

  7. GDAL读取影像并插值

    影像读取 并缩放 读取大影像某一部分,并缩放到指定大小,我们有时会用如下代码: #include "gdal.h" #include "gdal_priv.h" ...

  8. flask框架下的jinja2模板引擎(2)(过滤器与自定义过滤器)

    flask框架下的jinja2模块引擎(1):https://www.cnblogs.com/chichung/p/9774556.html 这篇论文主要用来记录下 jinja2 的过滤器. 什么是过 ...

  9. js时间戳转换日期

    //js时间戳转换日期function formatDate(now) { var year=now.getFullYear(); var month=now.getMonth()+1; var da ...

  10. listview的pushBackDefaultItem中的item属性被修改问题

    time:2015/05/04 1. 描述 在cocostudio中有两个控件,一个listview,另外一个是隐藏的imageview,其中后者作为listview的元素.每次使用的时候把Image ...