AngularJS進(jìn)階(十九)在AngularJS應(yīng)用中集成百度地圖實(shí)現(xiàn)定位功能

2019-11-09 18:22:45

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

在AngularJS應(yīng)用中集成百度地圖實(shí)現(xiàn)定位功能

注：請點(diǎn)擊此處進(jìn)行充電!

前言

根據(jù)項(xiàng)目需求，需要實(shí)現(xiàn)手機(jī)定位功能，考慮到百度業(yè)務(wù)的強(qiáng)大能力，遂決定使用百度地圖第三方服務(wù)。

添加第三方模塊的步驟與前面介紹的“在AngularJS應(yīng)用中集成科大訊飛語音輸入功能”步驟相同，在此不再贅述。

問題

1.有些手機(jī)無法實(shí)現(xiàn)定位功能(以我的手機(jī)為例:MX2，剛開始時可以實(shí)現(xiàn)定位，后來就出現(xiàn)無法定位的情況，手機(jī)定位功能也已經(jīng)打開)。

一部分原因是有些手機(jī)真的沒有打開定位功能。(經(jīng)過檢查手機(jī)設(shè)置，還真是發(fā)現(xiàn)自己將手機(jī)定位功能給關(guān)閉了，打開手機(jī)定位功能后，定位正常)截圖如下:

經(jīng)過測試發(fā)現(xiàn)了與微信授權(quán)類似的問題:在真機(jī)測試是沒有問題的，打包成APK，然后再在手機(jī)上運(yùn)行則出現(xiàn)無法定位的情況。難道又是因?yàn)椤罢鏅C(jī)調(diào)試的時候使用的是HBuilder基座的參數(shù)”？

但是在別的手機(jī)安裝APK之后運(yùn)行結(jié)果正常，截圖如下:

2.手機(jī)雖然可以實(shí)現(xiàn)定位，但是定位速度比較慢。

跟網(wǎng)絡(luò)有一定的關(guān)系。

優(yōu)化

百度地理位置功能源碼分析

[html] view plain copy PRint?

[html]%20view%20plain%20copy%20print?

<scr

/* * 獲取地理位置信息 */ $rootScope.getAddr = function() { console.log("定位操作ing.............."); /*-------------------- 利用百度API定位 ------------------------*/ var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition( //獲取位置信息成功 function(position){ if(this.getStatus() == BMAP_STATUS_SUCCESS){ // alert('您的位置：' + position.point.lng + ',' + position.point.lat); $rootScope.longitude = position.point.lng; $rootScope.latitude = position.point.lat; // 根據(jù)坐標(biāo)得到地址描述 $rootScope.getGeo(); } else { alert('無法獲取定位信息，可能影響對服務(wù)藥店的篩選'); } },{ // 指示瀏覽器獲取高精度的位置，默認(rèn)為false enableHighAccuracy: true, // 指定獲取地理位置的超時時間，默認(rèn)不限時，單位為毫秒 // timeout: 5000, // 最長有效期(30S)，在重復(fù)獲取地理位置時，此參數(shù)指定多久再次獲取位置 maximumAge: 30*1000 }); };

HTML5地理位置功能源碼分析

源代碼如下所示:

[Javascript]%20view%20plain%20copy%20print?

<script src="http://api.map.baidu.com/components?ak=bOwh2i9zIWG7Ucl8xPitV2TM&v=1.0"> </script> /* * 獲取地理位置信息 */ $rootScope.getAddr = function() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( //獲取位置信息成功 function(position) { $rootScope.latitude = position.coords.latitude; $rootScope.longitude = position.coords.longitude; var myGeo = new BMap.Geocoder(); //根據(jù)坐標(biāo)得到地址描述 $rootScope.getGeo(); }, //獲取位置信息失敗 function(error) { switch (error.code) { case error.PERMISSION_DENIED: $rootScope.showAlert("請打開設(shè)備定位功能！"); break; case error.POSITION_UNAVAILABLE: $rootScope.showAlert("定位信息不可用！"); break; case error.TIMEOUT: $rootScope.showAlert("定位請求超時！"); break; case error.UNKNOWN_ERROR: $rootScope.showAlert("未知錯誤！"); break; } }, { // 指示瀏覽器獲取高精度的位置，默認(rèn)為false enableHighAccuracy: true, // 指定獲取地理位置的超時時間，默認(rèn)不限時，單位為毫秒 timeout: 5000, // 最長有效期，在重復(fù)獲取地理位置時，此參數(shù)指定多久再次獲取位置。 maximumAge: 3000 }); } else { $rootScope.showAlert("您的設(shè)備不支持GPS定位！"); } }; $rootScope.getAddr(); $rootScope.getGeo = function() { var myGeo = new BMap.Geocoder(); // 根據(jù)坐標(biāo)得到地址描述 myGeo.getLocation(new BMap.Point($rootScope.longitude, $rootScope.latitude), function(result) { if (result) { console.log(JSON.stringify(result)); $rootScope.geoaddress = { 'fulladdress': result.addressComponents.city + result.addressComponents.district + result.addressComponents.street, 'city': result.addressComponents.city, 'area': result.addressComponents.district, 'street': result.addressComponents.street, }; console.log(JSON.stringify($rootScope.geoaddress)); }else { $rootScope.showAlert("定位失敗,地址解析失敗"); } }); };

感悟

通過閱讀參考資料3，得知上面使用的定位方式是采用的 HTML5 的地理位置功能。

注：

　總的來說，在PC的瀏覽器中 Html5 的地理位置功能獲取的位置精度不夠高，如果借助這個 HTML5 特性做一個城市天氣預(yù)報是綽綽有余，但如果是做一個地圖應(yīng)用，那誤差還是太大了。不過，如果是移動設(shè)備上的 HTML5 應(yīng)用，可以通過設(shè)置 enableHighAcuracy 參數(shù)為 true，調(diào)用設(shè)備的 GPS 定位來獲取高精度的地理位置信息。