首页 > 建站教程 > 地图,GIS教程 >  html5+经纬度定位不准确,html5坐标转火星坐标,百度地图Convertor.translate正文

html5+经纬度定位不准确,html5坐标转火星坐标,百度地图Convertor.translate

    今天,我爱模板网在做APP考勤时,需要定位用户的位置,显示在地图上,于是就想到了用h5+的plus.geolocation.getCurrentPosition来获取经纬度,然后通过百度地图api将经纬度转换成详细的地址以及地图。但是,在手机上测试,总是偏差一两公里左右,估计是国内的地图产品,其地理位置大多数都进行了GCJ-02加密,即加入随机的偏差。而html5原生的定位API获取到的地理位置,是未经加密的。
    标准地球坐标即GPS设备获得的坐标,该坐标需要经过国家测绘局进行加密后形成火星坐标(WGS-84),我们用的google坐标和高德地图坐标也就是火星坐标。
    百度地图,在火星坐标的基础上再进行一次加密,形成了百度地图上的坐标,因此,直接将标准地球坐标显示在百度地图上是会有几百米的偏差的。按照此原理,标准GPS坐标经过两步的转换可得到百度坐标。因为在处理百度地图时,例如查询其POI都需要百度地图上的坐标,而不是标准坐标,那么这样的转换就是必要的了。
    因此,为了保证html5原生的定位API获取到的地理位置在百度地图上较为准确的解析,就需要用百度官方提供的转换类(其他地图如高德也提供了类似的转换方法):Convertor.translate,需要引入convertor.js。
    下面是最终的代码,大家可以看看:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您申请的key"></script>
<script src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>

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的源码:
//2011-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.map.baidu.com/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下载地址:convertor.js