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;
	    }
    	});
    }
});	

最後結果，儘管解決了小米獲取不到定位信息的問題，但是獲取到的定位，卻不準確。比如：實際定位在杭州市濱江區，小米的定位返回結果卻在江乾區。相差遠了~目前，以我的能力是解決不了這個問題了。