# 在AngularJS應用中集成百度地圖實現定位功能 **[注：請點擊此處進行充電!](http://blog.csdn.net/sunhuaqiang1/article/details/50193301#t2)** ### 前言 根據項目需求，需要實現手機定位功能，考慮到百度業務的強大能力，遂決定使用百度地圖第三方服務。 添加第三方模塊的步驟與前面介紹的“[在AngularJS應用中集成科大訊飛語音輸入功能](http://blog.csdn.net/sunhuaqiang1/article/details/50193301#t2)”步驟相同，在此不再贅述。 ### 問題 1.有些手機無法實現定位功能(以我的手機為例:MX2，剛開始時可以實現定位，后來就出現無法定位的情況，手機定位功能也已經打開)。 一部分原因是有些手機真的沒有打開定位功能。(經過檢查手機設置，還真是發現自己將手機定位功能給關閉了，打開手機定位功能后，定位正常)截圖如下: ???? ? ? ? ?? 經過測試發現了與微信授權類似的問題:在真機測試是沒有問題的，打包成APK，然后再在手機上運行則出現無法定位的情況。難道又是因為“真機調試的時候使用的是HBuilder基座的參數”？ 但是在別的手機安裝APK之后運行結果正常，截圖如下: ? 2.手機雖然可以實現定位，但是定位速度比較慢。 跟網絡有一定的關系。 ### 優化 ### 源碼分析 源代碼如下所示: ~~~ <!--百度地圖--> <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(); //根據坐標得到地址描述 $rootScope.getGeo(); }, //獲取位置信息失敗 function(error) { switch (error.code) { case error.PERMISSION_DENIED: $rootScope.showAlert("請打開設備定位功能！"); break; case error.POSITION_UNAVAILABLE: $rootScope.showAlert("定位信息不可用！"); break; case error.TIMEOUT: $rootScope.showAlert("定位請求超時！"); break; case error.UNKNOWN_ERROR: $rootScope.showAlert("未知錯誤！"); break; } }, { // 指示瀏覽器獲取高精度的位置，默認為false enableHighAccuracy: true, // 指定獲取地理位置的超時時間，默認不限時，單位為毫秒 timeout: 5000, // 最長有效期，在重復獲取地理位置時，此參數指定多久再次獲取位置。 maximumAge: 3000 }); } else { $rootScope.showAlert("您的設備不支持GPS定位！"); } }; $rootScope.getAddr(); $rootScope.getGeo = function() { var myGeo = new BMap.Geocoder(); // 根據坐標得到地址描述 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?特性做一個城市天氣預報是綽綽有余，但如果是做一個地圖應用，那誤差還是太大了。不過，如果是移動設備上的?HTML5?應用，可以通過設置?enableHighAcuracy?參數為?true，調用設備的?GPS?定位來獲取高精度的地理位置信息。 ### 附： ### 手機定位方式匯總 GPS，基站，Wi-Fi等多種定位方式 ### 什么是GPS定位、基站定位和Wi-Fi定位？ 1、GPS定位：根據設備GPS芯片和GPS衛星實現定位，GPS定位在室內是不可以使用的。GPS定位精度和芯片本身以及實際使用環境有關，一般情況下，GPS定位精度在10m左右。 2、基站定位：根據設備獲取的基站信息實現定位，基站定位精度一般不受使用環境影響，主要和基站的覆蓋半徑有關。百度的基站定位服務精度目前在200m左右。 3、Wi-Fi定位：根據設備獲取的Wi-Fi的信息進行定位，Wi-Fi定位精度一般不受使用環境影響，主要和Wi-Fi半徑，密度有關。百度的Wi-Fi定位精度目前在20m左右。 ### 疑問 如何判斷手機的定位方式？ ### 附加獎勵 額外發現一個問題:當手機出現定位失敗的情況，如何處理？移動端在軟件邏輯設計上還存在缺陷。 ### 參考資料: 1.?[http://www.html5plus.org/doc/zh_cn/maps.html](http://www.html5plus.org/doc/zh_cn/maps.html) 2.?[http://blog.csdn.net/smok56888/article/details/20628161](http://blog.csdn.net/smok56888/article/details/20628161) 3.?[http://www.cnblogs.com/lhb25/archive/2012/07/10/html5-geolocation-api-demo.html](http://www.cnblogs.com/lhb25/archive/2012/07/10/html5-geolocation-api-demo.html) 4.?[http://www.cnblogs.com/lhb25/archive/2012/07/06/html5-geolocation-api-demo.html](http://www.cnblogs.com/lhb25/archive/2012/07/06/html5-geolocation-api-demo.html) 5.?[http://www.zgxue.com/170/1700801.html](http://www.zgxue.com/170/1700801.html) 6.?[http://blog.csdn.net/cyzero/article/details/42584193](http://blog.csdn.net/cyzero/article/details/42584193) 7.?[http://blog.csdn.net/zuowensheng/article/details/7800308](http://blog.csdn.net/zuowensheng/article/details/7800308) 8.?[http://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Map.getUserLocation](http://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Map.getUserLocation)