百度地图,高德地图,HTML5经纬度比较
2015-10-21 16:14
836 查看
对于一个地点的经纬度,是确定的?这个问题,我想很多人都会回答,肯定了,可实际上呢?我只能呵呵了。
在使用百度地图的过程中,发现一个很奇怪的现象,有时候调用百度地图js API时,后得到一个错的离谱的地方。然后我自己也就研究了一下jsAPI获取地理位置的相关信息,jsAPI其实都是利用了HTML5中的方法获取地理信息的。但很奇怪,使用HTML5获取到的经纬度和百度获取的竟然相差很大。
HTML5获取到的经纬度
[javascript]
view plaincopyprint?
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); }
百度地图获取经纬度的方法
[javascript]
view plaincopyprint?
// 百度地图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)
}
}
[javascript]
view plaincopyprint?
// 高德地图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);
}
使用这三种方法获取的经纬度竟然有很大不同!!
![](http://img.blog.csdn.net/20151019101655327?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
小数点后第一位就有可能不一样了,小数点后第二位是肯定不一样的,0.01的偏差就会导致几十公里的偏差,测试多次依然是这样。
最后在百度地图的官方文档找到了这样的的话
百度地图坐标转换API是一套以HTTP形式提供的坐标转换接口,用于将常用的非百度坐标(目前支持GPS设备获取的坐标、google地图坐标、soso地图坐标、amap地图坐标、mapbar地图坐标)转换成百度地图中使用的坐标,并可将转化后的坐标在百度地图JavaScript API、车联网API、静态图API、web服务API等产品中使用。注意Android
SDK、iOS SDK、定位SDK和导航SDK坐标转换服务需单独申请
百度地图官方文档
才知道HTML5得到的数据是需要转化之后才是百度地图的经纬度。难怪测试了很多次,几乎都有这么大的偏差。
HTML5经纬度转化为百度地图经纬度的方法:
[javascript]
view plaincopyprint?
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返回的经纬度,但没找到相关的文档,百度地图使用的是转化过的经纬度。一个简单的经纬度问题却由于各种原因导致了这么一个背离常识的问题,实在是令人难以理解!!
如何将非高德坐标转换为高德坐标系
百度地图坐标转换
在使用百度地图的过程中,发现一个很奇怪的现象,有时候调用百度地图js API时,后得到一个错的离谱的地方。然后我自己也就研究了一下jsAPI获取地理位置的相关信息,jsAPI其实都是利用了HTML5中的方法获取地理信息的。但很奇怪,使用HTML5获取到的经纬度和百度获取的竟然相差很大。
HTML5获取到的经纬度
[javascript]
view plaincopyprint?
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); }
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); }
百度地图获取经纬度的方法
[javascript]
view plaincopyprint?
// 百度地图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 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) } }高德地图获取经纬的方法
[javascript]
view plaincopyprint?
// 高德地图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);
}
// 高德地图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); }
使用这三种方法获取的经纬度竟然有很大不同!!
小数点后第一位就有可能不一样了,小数点后第二位是肯定不一样的,0.01的偏差就会导致几十公里的偏差,测试多次依然是这样。
最后在百度地图的官方文档找到了这样的的话
百度地图坐标转换API是一套以HTTP形式提供的坐标转换接口,用于将常用的非百度坐标(目前支持GPS设备获取的坐标、google地图坐标、soso地图坐标、amap地图坐标、mapbar地图坐标)转换成百度地图中使用的坐标,并可将转化后的坐标在百度地图JavaScript API、车联网API、静态图API、web服务API等产品中使用。注意Android
SDK、iOS SDK、定位SDK和导航SDK坐标转换服务需单独申请
百度地图官方文档
才知道HTML5得到的数据是需要转化之后才是百度地图的经纬度。难怪测试了很多次,几乎都有这么大的偏差。
HTML5经纬度转化为百度地图经纬度的方法:
[javascript]
view plaincopyprint?
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);
}
}
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返回的经纬度,但没找到相关的文档,百度地图使用的是转化过的经纬度。一个简单的经纬度问题却由于各种原因导致了这么一个背离常识的问题,实在是令人难以理解!!
如何将非高德坐标转换为高德坐标系
百度地图坐标转换
相关文章推荐
- 【读书笔记】HTML5移动Web开发指南 --- 移动Web界面样式
- html5学习之路
- 【开源】封装HTML5的localstorage
- 关于Flash的几点思考(Thoughts on Flash)
- html5 CSS3-----transform初识
- html5 实现网页截屏 页面生成图片(图文)
- HTML5+CSS3技术制作的数据云,下载即可使用,真正方便于程序员的demo
- 点击a标签页面加载效果-百度nprogress
- H5中游戏的核心控制器(定时器)
- Cloudera Manager5之安装部署CDH5.X
- h5场景生成demo
- H5-Canvas慕课01-绘制直线、多边形、七巧板
- sessionStorage html5客户端本地存储之sessionStorage及storage事件
- 让不支持HTML5的老浏览器 “兼容”HTML5
- HTML5在欧亚冰火两重天
- HTML5移动开发中的input输入框类型
- HTML5移动开发中的meta与link
- 神奇的HTML5离线存储(应用程序缓存)
- html5 canvas 与小丑。
- HTML5——Web存储API,sessionStorage和localStorage