html转换图片位置不正确的是 html5+经纬度定位不准确 html5坐标转火星坐标 百度地

今天，我爱模板网在做APP考勤时，需要定位用户的位置，显示在地图上，于是就想到了用h5+的plus.geolocation.getCurrentPosition来获取经纬度，然后通过百度地图api将经纬度转换成详细的地址以及地图。但是，在手机上测试，总是偏差一两公里左右，估计是国内的地图产品，其地理位置大多数都进行了GCJ-02加密，即加入随机的偏差。而html5原生的定位API获取到的地理位置，是未经加密的。

标准地球坐标即GPS设备获得的坐标，该坐标需要经过国家测绘局进行加密后形成火星坐标(WGS-84)，我们用的google坐标和高德地图坐标也就是火星坐标。

百度地图，在火星坐标的基础上再进行一次加密，形成了百度地图上的坐标，因此，直接将标准地球坐标显示在百度地图上是会有几百米的偏差的。按照此原理，标准GPS坐标经过两步的转换可得到百度坐标。因为在处理百度地图时，例如查询其POI都需要百度地图上的坐标，而不是标准坐标，那么这样的转换就是必要的了。

因此，为了保证html5原生的定位API获取到的地理位置在百度地图上较为准确的解析，就需要用百度官方提供的转换类(其他地图如高德也提供了类似的转换方法)：Convertor.translate，需要引入convertor.js。

下面是最终的代码，大家可以看看：

function initMap(){

//html5 plus 获取当前经纬度

plus.geolocation.getCurrentPosition(function(p){

curLat = p.coords.latitude; //纬度

curLon = p.coords.longitude; //经度

var gpsPoint = new BMap.Point(curLon, curLat); //创建点坐标

BMap.Convertor.translate(gpsPoint, 0, function(point){ //转换坐标

//point : {"lng":117.30145697312,"lat":31.848379254848}

latlon = point.lat + "," + point.lng;

document.querySelector('#coords').innerText = latlon;

//设置百度地图

var map = new BMap.Map('map');

map.centerAndZoom(point,18); //设置地图中心

var marker = new BMap.Marker(point);

map.addOverlay(marker); //加入覆盖物

var geoc = new BMap.Geocoder();

geoc.getLocation(point, function(rs){

var addComp = rs.addressComponents;

document.querySelector('#addr').innerText = addComp.province + addComp.city + addComp.district + addComp.street;

});

});

},function(e){

alert('定位失败：' + e.message);

});

}

下面是convertor.js的源码：

//-7-25

(function(){ //闭包

function load_script(xyUrl, callback){

var head = document.getElementsByTagName('head')[0];

var script = document.createElement('script');

script.type = 'text/javascript';

script.src = xyUrl;

//借鉴了jQuery的script跨域方法

script.onload = script.onreadystatechange = function(){

if((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")){

callback && callback();

// Handle memory leak in IE

script.onload = script.onreadystatechange = null;

if ( head && script.parentNode ) {

head.removeChild( script );

}

}

};

// Use insertBefore instead of appendChild to circumvent an IE6 bug.

head.insertBefore( script, head.firstChild );

}

function translate(point,type,callback){

var callbackName = 'cbk_' + Math.round(Math.random() * 10000); //随机函数名

var xyUrl = "http://api./ag/coord/convert?from="+ type + "&to=4&x=" + point.lng + "&y=" + point.lat + "&callback=BMap.Convertor." + callbackName;

//动态创建script标签

load_script(xyUrl);

BMap.Convertor[callbackName] = function(xyResult){

delete BMap.Convertor[callbackName]; //调用完需要删除改函数

var point = new BMap.Point(xyResult.x, xyResult.y);

callback && callback(point);

}

}

window.BMap = window.BMap || {};

BMap.Convertor = {};

BMap.Convertor.translate = translate;

})();

最后，附上convertor.js下载地址：

html转换图片位置不正确的是 html5+经纬度定位不准确 html5坐标转火星坐标 百度地图Convertor.translate...

如果觉得《html转换图片位置不正确的是 html5+经纬度定位不准确 html5坐标转火星坐标 百度地》对你有帮助，请点赞、收藏，并留下你的观点哦！