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读出。

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值