html5+经纬度定位不准确，html5坐标转火星坐标，百度地图Convertor.translate
- 作者：网页模板
- 类型：文章教程
- 点击次数：
- 发布时间：2018-04-03 16:14
今天，我爱模板网在做APP考勤时，需要定位用户的位置，显示在地图上，于是就想到了用h5+的plus.geolocation.getCurrentPosition来获取经纬度，然后通过百度地图api将经纬度转换成详细的地址以及地图。但是，在手机上测试，总是偏差一两公里左右，估计是国内的地图产品，其地理位置大多数都进行了GCJ-02加密，即加入随机的偏差。而html5原生的定位API获取到的地理位置，是未经加密的。
标准地球坐标即GPS设备获得的坐标，该坐标需要经过国家测绘局进行加密后形成火星坐标（WGS-84），我们用的google坐标和高德地图坐标也就是火星坐标。
百度地图，在火星坐标的基础上再进行一次加密，形成了百度地图上的坐标，因此，直接将标准地球坐标显示在百度地图上是会有几百米的偏差的。按照此原理，标准GPS坐标经过两步的转换可得到百度坐标。因为在处理百度地图时，例如查询其POI都需要百度地图上的坐标，而不是标准坐标，那么这样的转换就是必要的了。
因此，为了保证html5原生的定位API获取到的地理位置在百度地图上较为准确的解析，就需要用百度官方提供的转换类（其他地图如高德也提供了类似的转换方法）：Convertor.translate，需要引入convertor.js。
下面是最终的代码，大家可以看看：
(责任编辑：网页模板)
标准地球坐标即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.translate
