HTML5+百度地图，获取精确定位

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/einafetsslly/article/details/79862023

昨天用HBuilder打包MUI做的一个混合开发APP，碰到一个问题：真机测试可以获取到设备定位，但打包成APP后就获取失败。所以......(百度来的)

首先，引入百度地图的两个接口文件。

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZHCxHaAF7Eq1Lt9Il09GGRiZhAaypxR3"></script>

<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>

其次，JS部分代码。HTML5获取定位需要一定时间，所以下面调用百度地图传入经纬度，加了一个定时器，5秒钟之后才调用百度地图。

var map = new BMap.Map("allmap");  
var longitude, latitude;  
navigator.geolocation.getCurrentPosition(function (position) {  
    //获取经纬度
    longitude = position.coords.longitude;  
    latitude = position.coords.latitude;  
});  
setTimeout(function () {  
    //调用百度接口
    var gpsPoint = new BMap.Point(longitude, latitude);  
    BMap.Convertor.translate(gpsPoint, 0, function (point) {  
	var geoc = new BMap.Geocoder();  
	geoc.getLocation(point, function (rs) {  
	    var addComp = rs.surroundingPois[0].address;  
            alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);  
	    alert(JSON.stringify(addComp))；
            console.log(JSON.stringify(addComp))；
	});  
    });  
}, 5000);

补充：以上方法，华为/iphone测试都没问题，定位精准。但在用小米4真机测试时，出现了兼容问题。无法获取经纬度，返回了undefined。于是，两个后端同事一起帮我原因，解决。折腾了半个下午，小米真心是有毒~~

解决方法如下(上面引入的两个JS文件还是需要的)：

//调用百度接口  
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r) {
    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
        var myGeo = new BMap.Geocoder();
    	myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function(rs) {
//  	    打印返回值
//  	    console.log(JSON.stringify(rs)); 
	    if(rs.surroundingPois.length >0){
//		我们只取了其中一个位置信息
		dwaddr = rs.address + rs.surroundingPois[0].title;
	    }else{
		dwaddr = rs.address;
	    }
    	});
    }
});	

最后结果，尽管解决了小米获取不到定位信息的问题，但是获取到的定位，却不准确。比如：实际定位在杭州市滨江区，小米的定位返回结果却在江干区。相差远了~目前，以我的能力是解决不了这个问题了。