在ionic項(xiàng)目中，如果想實(shí)現(xiàn)定位功能，可以使用ng-cordova提供的cordova-plugin-geolocation。

但由于高墻的緣故，國內(nèi)andorid環(huán)境下，此插件不起作用（ios環(huán)境下可用）。

國內(nèi)比較好的是現(xiàn)實(shí)使用百度地圖提供的API，來實(shí)現(xiàn)定位，以及地圖的一系列擴(kuò)展功能。

現(xiàn)在我們使用'Weizhe He'提供的cordova-qdc-baidu-location來嘗試創(chuàng)建簡單的定位app。

?

Stpe1:創(chuàng)建一個(gè)項(xiàng)目（此處使用的是tab類型的項(xiàng)目，創(chuàng)建方式可參照我前一篇如何離線創(chuàng)建Ionic1項(xiàng)目）

Stpe2:申請百度地圖API秘鑰

　　????應(yīng)用類型請選擇：Andorid應(yīng)用

?????????? 包名：如圖所示的名字(config.xml內(nèi)?widget節(jié)點(diǎn)中id的值)

??????????

Stpe3:在項(xiàng)目中添加cordova-qdc-baidu-location插件

安裝插件命令：ionic plugin add https://github.com/hewz/cordova-baidu-location --variable API_KEY="你的應(yīng)用秘鑰"
ps:
卸載插件命令：ionic plugin rm com.hewz.plugins.baidu.location
列出所有插件：ionic plugin list????????????

???????????安裝完畢后可見下圖內(nèi)容：

??????????

Stpe4:在項(xiàng)目中添加百度地圖API的JS引用

???????????打開Index.html

????????? 4.1?在head中添加代碼

<meta http-equiv="Content-Security-Policy" content="script-src * 'unsafe-eval'; connect-src * 'unsafe-eval';object-src 'self'; style-src * 'unsafe-inline'; img-src *" > <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你應(yīng)用的秘鑰"></script>

???????? 4.2?編寫插件使用代碼

????????? 4.2.1 打開www->templates->tab-dash.html修改代碼為：

<ion-view view-title="百度地圖測試"><ion-content><ion-list><ion-item><button class="button button-block button-calm" ng-click="getpoint()"> 開始定位 </button></ion-item><ion-item>經(jīng)度：{{ret.longitude}} 緯度：{{ret.latitude}}</ion-item><ion-item><div id="allmap" style="height: 600px;"></div></ion-item></ion-list></ion-content> </ion-view>

????????? 4.2.2 打開www->js->controllers.js修改[DashCtrl]代碼為：

.controller('DashCtrl', function($scope) {var map = new BMap.Map("allmap"); // 創(chuàng)建Map實(shí)例var point = new BMap.Point(104.108164,30.773969); // 創(chuàng)建點(diǎn)坐標(biāo)$scope.ret = {latitude:30.773969, longitude:104.108164};map.centerAndZoom(point,19); // 初始化地圖,用城市名設(shè)置地圖中心點(diǎn)var marker = new BMap.Marker(point); // 創(chuàng)建標(biāo)注map.addOverlay(marker); // 將標(biāo)注添加到地圖中 $scope.getpoint = function() {baidu_location.getCurrentPosition(function(data){$scope.ret = {longitude:data.longitude, latitude:data.latitude};var map = new BMap.Map("allmap"); // 創(chuàng)建Map實(shí)例var point = new BMap.Point(data.longitude, data.latitude); // 創(chuàng)建點(diǎn)坐標(biāo)map.centerAndZoom(point,19);var marker = new BMap.Marker(point); // 創(chuàng)建標(biāo)注map.addOverlay(marker); // 將標(biāo)注添加到地圖中}, function(err){alert("錯(cuò)誤："+ err)});}; })

Stpe5:測試

需要注意的是，我們在瀏覽器測試項(xiàng)目的時(shí)候，會(huì)提示baidu_location沒有定義，實(shí)際需要在手機(jī)上體驗(yàn)完整功能。

手機(jī)連接電腦后，使用ionic小助手，打開項(xiàng)目并真機(jī)調(diào)試，直接將app安裝到手機(jī)，注意打開手機(jī)USB調(diào)試模式，保持手機(jī)解鎖并點(diǎn)亮，ionic小助手編譯安裝完成，可能經(jīng)歷一下幾步：

?

其他：

?百度地圖API示例

?

特別感謝：Weizhe He

轉(zhuǎn)載于:https://www.cnblogs.com/larryNE/p/6066166.html

總結(jié)

以上是生活随笔為你收集整理的在ionic/cordova中使用百度地图插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。