HTML5   发布时间:2022-04-25  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了百度地图,高德地图,HTML5经纬度比较大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

对于一个地点的经纬度,是确定的?这个问题,我想很多人都会回答,肯定了,可实际上呢?我只能呵呵了。

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

HTML5获取到的经纬度

function getLOCATIOn() {
    if (navigator.geoLOCATIOn) {
        navigator.geoLOCATIOn.getCurrentPosition(showPosition);
    }
    else {alert( "GeoLOCATIOn is not supported by this browser.") }
} 

        function showPosition(position)  
  {
      $("#lngl").val(position.coords.longitude );
      $("#latl").val(position.coords.latitudE);   
}

百度地图获取经纬度的方法

  // 百度地图API功能
    var map = new BMap.Map("allmap");
    var circle = new BMap.GeoLOCATIOn();
    var options={};
    options.enableHighAccuracy=true;
    options.timeout=10;
    options.maximumAge=0;
    circle.getCurrentPosition(LOCATIOnResult,options);  //enableHighAccuracy	Boolean	要求浏览器获取最佳结果。,timeout	number	超时时间。,maximumAge	number	允许返回指定时间内的缓存结果。如果此值为0,则浏览器将立即获取新定位结果。
    map.addOverlay(circlE);
    var tempGeocoder = new BMap.Geocoder();
    function LOCATIOnResult(geoLOCATIOnResult) {
        var Status = this.getStatus()
        if (Status == 0)//检索成功。对应数值“0”。
        {
            $("#lngBaidu").val(geoLOCATIOnResult.point.lng);
            $("#latBaidu").val(geoLOCATIOnResult.point.lat);
            var address = geoLOCATIOnResult.address;
            $("#cityBaidu").val(address.city);
            $("#diStrictBaidu").val(address.diStrict);
            $("#streetBaidu").val(address.street);          
        else {
            alert("定位失败错误码" + Status)
        }
    }
高德地图获取经纬的方法

  // 高德地图API功能
        var mapObj,geoLOCATIOn;
        var MGeocoder;
        mapObj = new AMap.Map('allmap1');
        mapObj.plugin('AMap.GeoLOCATIOn',function () {
            geoLOCATIOn = new AMap.GeoLOCATIOn({
                enableHighAccuracy: true,//是否使用高精度定位,认:true
                timeout: 10000,//超过10秒后停止定位,认:无穷大
                maximumAge: 0,//定位结果缓存0毫秒,认:0
                convert: false,//自动偏移坐标,偏移后的坐标为高德坐标,认:true
                showButton: false,//显示定位按钮,认:true
                buttonPosition: 'LB',//定位按钮停靠位置,认:'LB',左下角
                buttonOffset: new AMap.pixel(10,20),//定位按钮与设置的停靠位置的偏移量,认:Pixel(10,20)
                showMarker: false,//定位成功后在定位到的位置显示标记认:true
                showCircle: false,//定位成功后用圆圈表示定位精度范围,认:true
                panToLOCATIOn: true,//定位成功后将定位到的位置作为地图中心点,认:true
                zoomToAccuracy: true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,认:false
            });  
            mapObj.addControl(geoLOCATIOn);
            AMap.event.addListener(geoLOCATIOn,'complete',onCompletE); //返回定位信息
            AMap.event.addListener(geoLOCATIOn,'error',onError);      //返回定位出错信息      
            geoLOCATIOn.getCurrentPosition();
        });      
        function onComplete(data) {        
            var lnglatXY = [data.position.getLng(),data.position.getLat()];
            $("#accuracy").val(data.accuracy);
            $("#lng").val(data.position.getLng());
            $("#lat").val(data.position.getLat());
        }
		 function onError(data) {
            var str = '定位失败;';
            str += '错误信息:'
            switch (data.info) {
                case 'PERMISSION_DENIED':
                    str += '浏览器阻止了定位操作';
                    break;
                case 'POSITION_UNAVAILBLE':
                    str += '无法获得当前位置';
                    break;
                case 'TIMEOUT':
                    str += '定位超时';
                    break;
                default:
                    str += '未知错误';
                    break;
            }       
            alert(str);
        }

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

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



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

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

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

@L_301_1@

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

HTML5经纬度转化为百度地图经纬度的方法

 var ggPoint = new BMap.point(position.coords.longitude,position.coords.latitudE);//HTML5的经纬度
 var convertor = new BMap.Convertor();
            var pointArr = [];
            pointArr.push(ggPo@R_197_10185@;
            convertor.translate(pointArr,1,5,translateCallBACk)
        }
		 //坐标转换完之后的回调函数
    translateCallBACk = function (data) {
        if (data.status === 0) {
          //  data.points[0];
       //转换后的百度坐标(正确)
            $("#lngz").val(data.points[0].lng);
            $("#latz").val(data.points[0].lat);
        }
    }

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


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


如何将非高德坐标转换为高德坐标系

百度地图坐标转换

大佬总结

以上是大佬教程为你收集整理的百度地图,高德地图,HTML5经纬度比较全部内容,希望文章能够帮你解决百度地图,高德地图,HTML5经纬度比较所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。