在ionic项目中,如果想实现定位功能,可以使用ng-cordova提供的cordova-plugin-geolocation。

但由于高墙的缘故,国内andorid环境下,此插件不起作用(ios环境下可用)。

国内比较好的是现实使用百度地图提供的API,来实现定位,以及地图的一系列扩展功能。

现在我们使用'Weizhe He'提供的cordova-qdc-baidu-location来尝试创建简单的定位app。

Stpe1:创建一个项目(此处使用的是tab类型的项目,创建方式可参照我前一篇如何离线创建Ionic1项目)

Stpe2:申请百度地图API秘钥

      应用类型请选择:Andorid应用

包名:如图所示的名字(config.xml内 widget节点中id的值)

Stpe3:在项目中添加cordova-qdc-baidu-location插件

安装插件命令:ionic plugin add https://github.com/hewz/cordova-baidu-location --variable API_KEY="你的应用秘钥"ps:卸载插件命令:ionic plugin rm com.hewz.plugins.baidu.location列出所有插件:ionic plugin list             

安装完毕后可见下图内容:

Stpe4:在项目中添加百度地图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=你应用的秘钥"></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>经度:{{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");                         // 创建Map实例var point = new BMap.Point(104.108164,30.773969);         // 创建点坐标$scope.ret = {latitude:30.773969, longitude:104.108164};map.centerAndZoom(point,19);                              // 初始化地图,用城市名设置地图中心点var marker = new BMap.Marker(point);                      // 创建标注map.addOverlay(marker);                                   // 将标注添加到地图中
$scope.getpoint = function() {baidu_location.getCurrentPosition(function(data){$scope.ret = {longitude:data.longitude, latitude:data.latitude};var map = new BMap.Map("allmap");                           // 创建Map实例var point = new BMap.Point(data.longitude, data.latitude);  // 创建点坐标map.centerAndZoom(point,19);var marker = new BMap.Marker(point);                        // 创建标注map.addOverlay(marker);                                     // 将标注添加到地图中}, function(err){alert("错误:"+ err)});};
})

Stpe5:测试

需要注意的是,我们在浏览器测试项目的时候,会提示baidu_location没有定义,实际需要在手机上体验完整功能。

手机连接电脑后,使用ionic小助手,打开项目并真机调试,直接将app安装到手机,注意打开手机USB调试模式,保持手机解锁并点亮,ionic小助手编译安装完成,可能经历一下几步:

其他:

百度地图API示例

特别感谢:Weizhe He

转载于:https://www.cnblogs.com/larryNE/p/6066166.html

在ionic/cordova中使用百度地图插件相关推荐

  1. vue中调用百度地图实现搜索等功能

    vue中调用百度地图实现搜索等功能 在最近做电商项目时用户订单等物流信息想做的更加详细点所以加入了地图这个小功能,不是很难只是在一个未知的领域可能有点迷茫 现在也是体会到了,学新的东西还是得看官方文档 ...

  2. 百度地图的使用方法,如何在Vue项目中使用百度地图

    关于百度地图的解释 百度地图又称LBS:LocationBussinessServer,是基于定义位置的商业服务,现在常用的地图有百度地图和高德地图居多 官网入口 https://lbsyun.bai ...

  3. Vue的百度地图插件尝试

    百度地图插件 安装 CDN全局安装 <script src="https://unpkg.com/vue-baidu-map"></script> 插件的引 ...

  4. Android 百度地图开发(一)--- 申请API Key和在项目中显示百度地图

    2019独角兽企业重金招聘Python工程师标准>>> 最近自己想研究下地图,本来想研究google Map,但是申请API key比较坑爹,于是从百度地图入手,其实他们的用法都差不 ...

  5. 在网页中插入百度地图

    在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api. 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/creatmap/ ...

  6. mysql 百度地图插件_GitHub - huizhong/grafana-baidumap-panel: Grafana 百度地图插件

    Baidumap Panel Plugin for Grafana Grafana的百度地图插件,基于WorldMap修改.主要的可视化功能有:更换AK.添加/删除控件.更换主题.更改地图级别,测距工 ...

  7. 在网页中插入百度地图(实例)

    步骤 1 2 3 如何在网页中插入百度地图呢? 2.切换城市,搜索需标注位置.(如下图 方法/步骤 1.进入:http://api.map.baidu.com/lbsapi/creatmap/(创建地 ...

  8. react 使用 leaflet 百度地图_【React】react项目中应用百度地图添加起始点绘制路线...

    如图:项目中百度地图的应用添加起始点.终点并绘制路线 在展示代码的时候首先展示一下后台返回给我的接口 { 其中position_list参数代表的是用户的行驶点, area参数代表的是服务区的坐标点, ...

  9. 如何在网页中加入百度地图

    昨天给某企业做网站建设,对方要求在网页中加入百度地图,并表示可以增加酬劳.武汉SEO老钱出于信誉合作的考虑,这块直接给对方免单了-- 关于如何在网页中加入百度地图,其实并没有想象中那么复杂,因为,这是 ...

最新文章

  1. 实用技能 | OpenCV算法程序导出 DLL与调用演示
  2. Ext 整合 Jquery
  3. android6.0源码分析之Runtime的初始化
  4. CSS魔法堂:你一定误解过的Normal flow
  5. 关于 matlab 的 s 函数的 DirFeedthrough
  6. 【实践驱动开发3-004】TI WL1835MODCOM8 在android的移植 - 系统结构初始化和参考列表
  7. 力扣236. 二叉树的最近公共祖先(JavaScript)
  8. qml入门学习(五):alias
  9. 【报告分享】2021年度私域经营洞察报告.pdf(附下载链接)
  10. java实现千米与经纬度度数的转换(画圆左右有精度缺失)
  11. C语言库函数大全及应用实例三
  12. uboot源码分析(1)uboot 命令解析流程简析
  13. linux网络安装mysql_linux系统安装mysql
  14. css-flex 常见面试题
  15. 数据库中select 查询详解
  16. RQNOJ 34 紧急援救
  17. 提示获取硬盘分区失败,可能缺少硬盘驱动(ThinkStation使用U启动重装系统)
  18. matlab eemd输出,MATLAB信号处理EEMD工具箱
  19. windows7安装ios开发环境总结(VMware9.0+VMware补丁+dmg镜像+Xcode)
  20. python绘制彩色地震剖面断层解释_断层在地震剖面上的反映及解释

热门文章

  1. mysql如何设置多节点_详细介绍Mysql5.7从节点设置多线程主从复制的办法
  2. python 微信支付接口 详解_Python支付接口汇总大全(包含微信、支付宝等,长期更新、欢迎补充)...
  3. usb大容量存储设备驱动_usb无法识别怎么办 如何解决usb识别故障【详细步骤】...
  4. python数据挖掘与机器学习实战_Python数据挖掘与机器学习技术入门实战(1)
  5. 操作系统上机作业--创建N个线程(多线程)
  6. 前向验证对于模型的更新作用
  7. 汇编语言-008(条件跳转应用 、loopnz 条件循环指令使用 、loopz 条件循环指令使用 、 if语句编写汇编时 、while语句编写汇编时 、循环内的if语句嵌套)
  8. python---异常处理结构
  9. Redis源码分析(零)学习路径笔记
  10. No module named 'Tkinter'