UDN-企业互联网技术人气社区
UDN 企业互联网技术社区 前端精选 HTML5精选 百度地图,高德地图,HTML5经纬度比较

百度地图,高德地图,HTML5经纬度比较

葡萄柚 论坛 2016-5-4 10:26
分享到:
摘要: 在使用百度地图的过程中,发现一个很奇怪的现象,有时候调用百度地图js API时,后得到一个错的离谱的地方。然后我自己也就研究了一下jsAPI获取地理位置的相关信息,jsAPI其实都是利用了HTML5中的方法获取地理信息的 ...
  对于一个地点的经纬度,是确定的?这个问题,我想很多人都会回答,肯定了,可实际上呢?我只能呵呵了。

  在使用百度地图的过程中,发现一个很奇怪的现象,有时候调用百度地图js API时,后得到一个错的离谱的地方。然后我自己也就研究了一下jsAPI获取地理位置的相关信息,jsAPI其实都是利用了HTML5中的方法获取地理信息的。但很奇怪,使用HTML5获取到的经纬度和百度获取的竟然相差很大。

  HTML5获取到的经纬度
  1. function getLocation() {
  2.     if (navigator.geolocation) {
  3.         navigator.geolocation.getCurrentPosition(showPosition);
  4.     }
  5.     else {alert( Geolocation is not supported by this browser.) }
  6. }

  7.         function showPosition(position)  
  8.   {
  9.       $(#lngl).val(position.coords.longitude );
  10.       $(#latl).val(position.coords.latitude);   
  11. }
复制代码

  百度地图获取经纬度的方法
  1. // 百度地图API功能
  2.   var map = new BMap.Map(allmap);
  3.   var circle = new BMap.Geolocation();
  4.   var options={};
  5.   options.enableHighAccuracy=true;
  6.   options.timeout=10;
  7.   options.maximumAge=0;
  8.   circle.getCurrentPosition(locationResult, options);  //enableHighAccuracy   Boolean 要求浏览器获取最佳结果。,timeout    Number  超时时间。,maximumAge    Number  允许返回指定时间内的缓存结果。如果此值为0,则浏览器将立即获取新定位结果。
  9.   map.addOverlay(circle);
  10.   var tempGeocoder = new BMap.Geocoder();
  11.   function locationResult(geolocationResult) {
  12.       var Status = this.getStatus()
  13.       if (Status == 0)//检索成功。对应数值“0”。
  14.       {
  15.           $(#lngBaidu).val(geolocationResult.point.lng);
  16.           $(#latBaidu).val(geolocationResult.point.lat);
  17.           var address = geolocationResult.address;
  18.           $(#cityBaidu).val(address.city);
  19.           $(#districtBaidu).val(address.district);
  20.           $(#streetBaidu).val(address.street);         
  21.       else {
  22.           alert(定位失败错误码 + Status)
  23.       }
  24.   }
复制代码

  高德地图获取经纬的方法
  1. // 高德地图API功能
  2.       var mapObj, geolocation;
  3.       var MGeocoder;
  4.       mapObj = new AMap.Map('allmap1');
  5.       mapObj.plugin('AMap.Geolocation', function () {
  6.           geolocation = new AMap.Geolocation({
  7.               enableHighAccuracy: true, //是否使用高精度定位,默认:true
  8.               timeout: 10000,          //超过10秒后停止定位,默认:无穷大
  9.               maximumAge: 0,           //定位结果缓存0毫秒,默认:0
  10.               convert: false,           //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
  11.               showButton: false,        //显示定位按钮,默认:true
  12.               buttonPosition: 'LB',    //定位按钮停靠位置,默认:'LB',左下角
  13.               buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
  14.               showMarker: false,        //定位成功后在定位到的位置显示点标记,默认:true
  15.               showCircle: false,        //定位成功后用圆圈表示定位精度范围,默认:true
  16.               panToLocation: true,     //定位成功后将定位到的位置作为地图中心点,默认:true
  17.               zoomToAccuracy: true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
  18.           });  
  19.           mapObj.addControl(geolocation);
  20.           AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
  21.           AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息      
  22.           geolocation.getCurrentPosition();
  23.       });      
  24.       function onComplete(data) {        
  25.           var lnglatXY = [data.position.getLng(), data.position.getLat()];
  26.           $(#accuracy).val(data.accuracy);
  27.           $(#lng).val(data.position.getLng());
  28.           $(#lat).val(data.position.getLat());
  29.       }
  30.        function onError(data) {
  31.           var str = '定位失败;';
  32.           str += '错误信息:'
  33.           switch (data.info) {
  34.               case 'PERMISSION_DENIED':
  35.                   str += '浏览器阻止了定位操作';
  36.                   break;
  37.               case 'POSITION_UNAVAILBLE':
  38.                   str += '无法获得当前位置';
  39.                   break;
  40.               case 'TIMEOUT':
  41.                   str += '定位超时';
  42.                   break;
  43.               default:
  44.                   str += '未知错误';
  45.                   break;
  46.           }      
  47.           alert(str);
  48.       }
复制代码

  使用这三种方法获取的经纬度竟然有很大不同!!
2.png

  小数点后第一位就有可能不一样了,小数点后第二位是肯定不一样的,0.01的偏差就会导致几十公里的偏差,测试多次依然是这样。

  最后在百度地图的官方文档找到了这样的的话

  百度地图坐标转换API是一套以HTTP形式提供的坐标转换接口,用于将常用的非百度坐标(目前支持GPS设备获取的坐标、google地图坐标、soso地图坐标、amap地图坐标、mapbar地图坐标)转换成百度地图中使用的坐标,并可将转化后的坐标在百度地图JavaScript API、车联网API、静态图API、web服务API等产品中使用。注意Android SDK、iOS SDK、定位SDK和导航SDK坐标转换服务需单独申请

  百度地图官方文档

  才知道HTML5得到的数据是需要转化之后才是百度地图的经纬度。难怪测试了很多次,几乎都有这么大的偏差。

  HTML5经纬度转化为百度地图经纬度的方法:
  1. var ggPoint = new BMap.Point(position.coords.longitude, position.coords.latitude);//HTML5的经纬度
  2. var convertor = new BMap.Convertor();
  3.            var pointArr = [];
  4.            pointArr.push(ggPoint);
  5.            convertor.translate(pointArr, 1, 5, translateCallback)
  6.        }
  7.         //坐标转换完之后的回调函数
  8.    translateCallback = function (data) {
  9.        if (data.status === 0) {
  10.          //  data.points[0];
  11.       //转换后的百度坐标(正确)
  12.            $(#lngz).val(data.points[0].lng);
  13.            $(#latz).val(data.points[0].lat);
  14.        }
  15.    }
复制代码

  经过这么转化后,偏差基本上在小数点后前三位基本上都一样了。

  经过测试发现,高德地图似乎直接使用了HTML5返回的经纬度,但没找到相关的文档,百度地图使用的是转化过的经纬度。一个简单的经纬度问题却由于各种原因导致了这么一个背离常识的问题,实在是令人难以理解!!

相关阅读

分享到:
已有3条评论

最新评论

冷月葬花魂
还是挺有借鉴意义的
狗剩媳妇儿
「狂神战天」
鄙视楼下的顶帖没我快,哈哈

一周焦点

关注我们:
关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
返回顶部