Ionic 調用百度插件和使用百度地圖

ionic 中ngcordova提供基於谷歌地圖定位功能

下面開啟項目之旅
1、新建項目
ionic start Ionic_barcode blank
cd Ionic_barcode
ionic platform add Android
2、 添加百度地圖定位插件

cordova plugin add https://github.com/liyujun1989/cordova-qdc-baidu-location

百度地圖定位插件地址： https://github.com/liyujun1989/cordova-qdc-baidu-location
里面有插件的使用方法

3、使用百度地圖插件
在index.html中
在controller中調用地圖的方法

$scope.tirarFoto = function(){
      /*alert("開始定位");*/
      var map = new BMap.Map("allmap");
      map.centerAndZoom(new BMap.Point(116.331398,39.897445),11);
      map.enableScrollWheelZoom(true);
    baidu_location.getCurrentPosition(function(data){
       $scope.data=data;
       $rootScope.team=data;
    }, function(err){
      alert("錯誤："+err)
    });
};

4、 地圖展示頁面

<ion-view view-title="百度插件定位">
  <ion-content class="padding">
    <button class="button button-block button-positive icon-left "  ng-click="tirarFoto()">
      獲取地理定位
    </button>
   </br></br>
   <p>定位數據</p></br></br>
   {{data}}
   <p>數據2</p>
   {{team}}</br></br>
    <div id="allmap"></div>
  <div id="r-result">
    經度: <input id="longitude" type="text" style="width:100px; margin-right:10px;" />
    緯度: <input id="latitude" type="text" style="width:100px; margin-right:10px;" />
    <input type="button" value="查詢" onclick="theLocation()" />
  </div>
  </ion-content>
</ion-view>

整個百度地圖的調用就完成了

1.當接口無法訪問
百度地圖、自定義API無法訪問，遠程調試結果顯示404
原因是cordova 5.x的版本增加了“Content-Security-Policy”用於解決安全訪問的問題。默認情況下，只能訪問本機資源。
解決方法：
1.添加白名單插件，在項目目錄下執行
ionic plugin add cordova-plugin-whitelist
2.在index.html頭部增加

<meta http-equiv="Content-Security-Policy" content="script-src * 'unsafe-eval'; connect-src * 'unsafe-eval'; object-src 'self'; style-src * 'unsafe-inline'; img-src *" >

2.百度地圖無法顯示

<script src="http://api.map.baidu.com/api?v=2.0&ak=HumGuK48Lis3kPdlHZBxvbvsqgHySljX"></script>