Ionic 调用百度插件和使用百度地图

ionic 中ngcordova提供基于谷歌地图定位功能，安装在Android机子上面不起作用，需要翻墙，所以项目中我采用百度地图定位

版本号



下面开启项目之旅

1、新建项目

ionic start Ionic_barcode blank

cd Ionic_barcode

ionic platform add android

2、 添加百度地图定位插件

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

百度地图定位插件地址： https://github.com/mrwutong/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){
/*alert(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>

上面是官方给的，但是打包安装到Android手机就无法显示。

将apk换成getscript 可能因为Android 无法将api write读出。