ionic1 添加百度地图插件 cordova-plugin-baidumaplocation
cordova-plugin-baidumaplocation 这个插件返回的数据是 json 格式的 可以直接获取 android 和 ios 都可用
1.先去百度地图平台去创建应用 获取访问应用AK android 和 ios 是分开的 不同的
http://lbsyun.baidu.com/
2.创建的时候需要发布版SHA1和开发板SHA1
参考链接:https://blog.csdn.net/lhg_55/article/details/52139277 (亲测有效)
3.添加插件
" " 里面直接写值 不需要 < > 括号
cordova plugin add cordova-plugin-baidumaplocation --variable ANDROID_KEY="<API_KEY_ANDROID>" --variable IOS_KEY="<API_KEY_IOS>"
4.添加相应代码
js页面
// 进行定位
baidumap_location.getCurrentPosition(function(result) {
var longitude = result.longitude; //经度
var latitude = result.latitude; //纬度
myaddr(longitude, latitude);
}, function(error) { });
//调用函数
myaddr(longitude, latitude); //根据定位得到的经纬度对地址进行解析
function myaddr(longitude, latitude) {
//alert("我的地址是:" + longitude + "," + latitude);
var map = new BMap.Map('location'); //与html的id名对应
var point = new BMap.Point(longitude, latitude);
map.centerAndZoom(point, 12);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
//把地址在地图上标出来
var geoc = new BMap.Geocoder();
geoc.getLocation(point, function(rs) {
var addrmsg = rs.address;
var addComp = rs.addressComponents; //详细的分省市县街道的信息
alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber); var opts = {
width: 600, // 信息窗口宽度
height: 50, // 信息窗口高度
}
var infoWindow = new BMap.InfoWindow("地址:" + addrmsg, opts); //创建信息窗口对象
map.openInfoWindow(infoWindow, point); //开启信息窗口 }); //移除监听事件
function showInfo(e) {
alert(e.point.lng + ", " + e.point.lat);
map.removeEventListener("click", showInfo);
}
//对地图点击时间进行监听
map.addEventListener("click", showInfo); }
html页面
<div id="location" style="width:100%;height:100%;"></div>
5.我做的过程中参考的其中一个链接:https://blog.csdn.net/zuoyiran520081/article/details/72771654?locationNum=12&fps=1
但是他说的引入js文件 我并没有 也可以成功
6.过程中可能遇到的问题
http://bbs.lbsyun.baidu.com/forum.php?mod=viewthread&tid=8955
https://blog.csdn.net/liyanlei5858/article/details/41284589
ionic1 添加百度地图插件 cordova-plugin-baidumaplocation的更多相关文章
- 在ionic/cordova中使用百度地图插件
在ionic项目中,如果想实现定位功能,可以使用ng-cordova提供的cordova-plugin-geolocation. 但由于高墙的缘故,国内andorid环境下,此插件不起作用(ios环境 ...
- ionic 项目使用百度地图插件(cordova-qdc-baidu-location)
现在我们使用'Weizhe He'提供的cordova-qdc-baidu-location来尝试创建简单的定位app. Stpe1:创建一个项目 Stpe2:申请百度地图API秘钥 应用类型 ...
- ios添加百度地图方法
Hello BaiduMapiOS SDK 引入头文件 引入静态库文件 引入系统framework 引入mapapi.bundle资源文件 初始化BMKMapManager 创建BMKMapView ...
- IOS学习:在工程中添加百度地图SDK
1.将下载下来的sdk中的inc文件夹.mapapi.bundle.libbaidumapapi.a添加到工程中,其中libbaiduapi.a有两个,一个对应模拟器一个对应真机,导入方法如下: 第一 ...
- vue Baidu Map --- vue百度地图插件
vue Baidu Map 官网:https://dafrok.github.io/vue-baidu-map/#/zh/start/installation javascript 官网:http:/ ...
- Html页面添加百度地图
1.进入百度地图开放平台 http://lbsyun.baidu.com/ 2.进入右上角的 “API控制台” 在这里创建应用 并 获取密钥 3.进入 如下地址 创建地图 http://api.m ...
- Html添加百度地图
方法/步骤 1.打开“百度地图生成器”的网址:http://api.map.baidu.com/lbsapi/creatmap/index.html 如下图: 2.在“1.定位中心点”中,切换城市,并 ...
- vue百度地图插件
安装 npm i --save vue-baidu-map 代码 <template> <div> <baidu-map v-bind:style="mapSt ...
- 百度地图插件(百度地图AK申请配置指南)
百度地图AK申请配置指南 [LBS云] 百度地图AK申请配置指南 1. 该文档是详细版,图文并茂: 2. 该指南是针对browser-mobile-sever三种终端开发的申请与配置说明: 3 ...
随机推荐
- flask 使用Flask-Migrate迁移数据库(创建迁移环境、生成迁移脚本、更新数据库)
使用Flask-Migrate迁移数据库 在开发时,以删除表再重建的方式更新数据库简单直接,但明显的缺陷是会丢掉数据库中的所有数据.在生产环境下,没有人想把数据都删除掉,这时需要使用数据库迁移工具来完 ...
- js 清空html input file的值
在做上传图片预览时,利用input onchange事件触发函数,但是type=file时,一定记得新建要清空原来的图片,因为原来的图片还存在在input里面,再选重复的图片没有change,故不会触 ...
- SQL Server 2012安装时报错,错误 0x80070422怎么解决?解决方法。
步骤一: Win+R打开运行窗口,输入services.msc 打开服务窗口 步骤二: 找到并启用"Windows Update" 成功进入下一步!
- Docker Kubernetes 容器扩容与缩容
Docker Kubernetes 容器扩容与缩容 环境: 系统:Centos 7.4 x64 Docker版本:18.09.0 Kubernetes版本:v1.8 管理节点:192.168.1.79 ...
- ORA-64379: Action cannot be performed on the tablespace assigned to FastStart while the feature is enabled
解决方法: 禁止IM FastStart exec DBMS_INMEMORY_ADMIN.FASTSTART_DISABLE();
- 【题解】Luogu P4588 [TJOI2018]数学计算
原题传送门 这题是线段树的模板题 显而易见,直接模拟是不好模拟的(取模后就不好再除了) 我们按照时间来建一颗线段树 线段树初始值都为1,用来维护乘积 第一种操作就在当前时间所对应的节点上把乘数改成m ...
- python 运算/赋值/循环
python3 中只有一个InputPython2 中的raw_input与python3中的input一模一样python3中input输出字符串类型int,float=数字类型//地板除 % 取余 ...
- [CodeForces 1141A] Game 23
题目链接:http://codeforces.com/problemset/problem/1141/A 首先,nn一定要是mm的倍数.否则就无法转换,输出-1: 然后令k=.\frac{m}{n} ...
- Java线程机制学习
前面的文章中总结过Java中用来解决共享资源竞争导致线程不安全的几种常用方式: synchronized: ReentrantLock: ThreadLocal: 这些都是在简单介绍了基本用法的基础上 ...
- Maven项目下servlet异常
今天新建了一个maven项目,导入包的时候红线报错,提示程序包不存在 在网上找了几个方法试过都无效,想起idea自带提示功能,点击红色报错的地方 同时按下Alt+Enter键,选择add maven ...