Ionic 调用百度插件和使用百度地图
2016-06-13 20:36
316 查看
ionic 中ngcordova提供基于谷歌地图定位功能
下面开启项目之旅
1、新建项目
ionic start Ionic_barcode blank
cd Ionic_barcode
ionic platform add Android
2、 添加百度地图定位插件
下面开启项目之旅
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[/code]
百度地图定位插件地址: 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>
相关文章推荐
- U盘文件后缀变成.exe怎么办?
- 链接、装载和库—目标文件里有什么
- PHP入门
- Effective C++--条款07:为多态基类声明virtual析构函数
- 【5】Java并发编程:线程同步工具之CountDownLatch类
- IO流 文件读取和写入 FileInputStream和FileOutputStream
- 浏览器新标签操作源页面元素
- MongoDB(四)分片集群
- chain.doFilter(request,response)含义
- 字典树+数组的前后部分数异或的最大值
- 汉诺塔问题
- C 内存分配 博客汇集
- KMP
- LTE下行物理层传输机制(4)-CCE
- Java编程思想(11~17)
- 强悍的命令行 —— man 区域码(section numbers)、C语言头文件及相关函数信息
- 从上往下打印二叉树24
- 负载均衡的方案
- <LeetCode OJ> 318. Maximum Product of Word Lengths
- 提高IIS的并发量