zl程序教程

您现在的位置是:首页 >  其他

当前栏目

百度地图,高德地图,HTML5经纬度比较详解手机开发

百度html5手机开发 详解 比较 地图 经纬度
2023-06-13 09:20:12 时间

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

在使用百度地图的过程中,发现一个很奇怪的现象,有时候调用百度地图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坐标转换服务需单独申请

百度地图官方文档

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

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

 var ggPoint = new BMap.Point(position.coords.longitude, position.coords.latitude);//HTML5的经纬度 

 var convertor = new BMap.Convertor(); 

 var pointArr = []; 

 pointArr.push(ggPoint); 

 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返回的经纬度,但没找到相关的文档,百度地图使用的是转化过的经纬度。一个简单的经纬度问题却由于各种原因导致了这么一个背离常识的问题,实在是令人难以理解!!

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

百度地图坐标转换

5295.html

app程序应用开发手机开发无线开发移动端开发