HTML5+百度地圖,獲取精確定位
阿新 • • 發佈:2019-01-06
昨天用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; } }); } });
最後結果,儘管解決了小米獲取不到定位資訊的問題,但是獲取到的定位,卻不準確。比如:實際定位在杭州市濱江區,小米的定位返回結果卻在江乾區。相差遠了~目前,以我的能力是解決不了這個問題了。