ionic用插件(cordova-plugin-baidumaplocation)定位并调百度地图在上面显示
2017-05-26 16:53
1001 查看
之前研究了定位,想用百度地图,但是用百度地图的
JavaScript API里面的浏览器定位根本不行,要用插件,很多人说本身带的这个cordova-plugin-geolocation插件因为网络问题,只有ios可以用,然后找到了专门针对安卓的cordova-qdc-baidu-location插件,但是这个插件不知道是不是我使用的问题,得到的数据可以弹出来,但是数据并不像这个插件所说的数据格式是
这样的,而是字符串,不是json字符串,弄了半天还是取不到里面的关于经纬度的值,然后发现了现在的这个定位插件cordova-plugin-baidumaplocation这个插件返回的数据格式是json的,可以直接获取。
因为网络配代理的原因,一直添加不上插件,今天才发现用cordova-plugin-baidumaplocation插件定位其实挺简单的。
1.申请AK值。
地址:http://lbsyun.baidu.com/
需要申请两个或者三个(配置ios),一个是js的,一个是android的(三个的话还有一个ios的,但是这边直接只写安卓的,其实ios是一样的)
注:包名要一致
2.添加插件.
命令:
注意:是没有<>这种尖括号的。
到此为止准备工作基本上晚了,开始代码部分:
1.引入百度地图:
这个引入是为了转化经纬度为地址和显示地图。
2.在html页面上写两个 标签:
div标签是为了放地图的。
3.js部分:
4.css部分:其实可以不要的,这是因为地图中的地址显示的窗口看起来有点问题,虽然改了依旧不好看,但是功能实现了。
注:现在得到的地址是省市县街道地址,想得到诸如:北京市朝阳区XX大厦附近这样的地址的话还没有研究,等研究出来了再补上。
最后,附上项目下载地址:
http://download.csdn.net/detail/zuoyiran520081/9853335
通过浏览器定位并显示地图:
http://blog.csdn.net/zuoyiran520081/article/details/63255316
JavaScript API里面的浏览器定位根本不行,要用插件,很多人说本身带的这个cordova-plugin-geolocation插件因为网络问题,只有ios可以用,然后找到了专门针对安卓的cordova-qdc-baidu-location插件,但是这个插件不知道是不是我使用的问题,得到的数据可以弹出来,但是数据并不像这个插件所说的数据格式是
{ latitude : 纬度, lontitude: 经度, ... }
这样的,而是字符串,不是json字符串,弄了半天还是取不到里面的关于经纬度的值,然后发现了现在的这个定位插件cordova-plugin-baidumaplocation这个插件返回的数据格式是json的,可以直接获取。
因为网络配代理的原因,一直添加不上插件,今天才发现用cordova-plugin-baidumaplocation插件定位其实挺简单的。
1.申请AK值。
地址:http://lbsyun.baidu.com/
需要申请两个或者三个(配置ios),一个是js的,一个是android的(三个的话还有一个ios的,但是这边直接只写安卓的,其实ios是一样的)
注:包名要一致
2.添加插件.
命令:
cordova plugin add cordova-plugin-baidumaplocation --variable ANDROID_KEY="<API_KEY_ANDROID>" --variable IOS_KEY="<API_KEY_IOS>"
注意:是没有<>这种尖括号的。
到此为止准备工作基本上晚了,开始代码部分:
1.引入百度地图:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nLsK9qUii8uBZlkPAQUozAf9mR5xNVZF"></script>
这个引入是为了转化经纬度为地址和显示地图。
2.在html页面上写两个 标签:
<button class="button" ng-click="getarea()">点击我获取地址百度</button> <div id='allmap' style=""></div>
div标签是为了放地图的。
3.js部分:
$scope.getarea=function(){ //myaddr(116.324499,39.899216); // 进行定位 baidumap_location.getCurrentPosition(function (result) { var latitude=result.latitude; var lontitude=result.lontitude; myaddr(lontitude,latitude); }, function (error) { }); } //根据定位得到的经纬度对地址进行解析 function myaddr(lontitude,latitude){ //alert("我的地址是:"+lontitude+","+latitude); // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(lontitude, latitude);//34.7534880000,113.6313490000 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 : 200, // 信息窗口宽度 height: 50, // 信息窗口高度 } var infoWindow = new BMap.InfoWindow("地址:"+addrmsg, opts); //创建信息窗口对象 map.openInfoWindow(infoWindow,point); //开启信息窗口 }); }
4.css部分:其实可以不要的,这是因为地图中的地址显示的窗口看起来有点问题,虽然改了依旧不好看,但是功能实现了。
.BMap_pop{ top: 70px !important; } .BMap_bubble_content{ width: 95% !important; } .BMap_center{ top: 26px !important; }
注:现在得到的地址是省市县街道地址,想得到诸如:北京市朝阳区XX大厦附近这样的地址的话还没有研究,等研究出来了再补上。
最后,附上项目下载地址:
http://download.csdn.net/detail/zuoyiran520081/9853335
通过浏览器定位并显示地图:
http://blog.csdn.net/zuoyiran520081/article/details/63255316
相关文章推荐
- cordova使用cordova-plugin-baidumaplocation插件获取定位
- ionic添加百度地图定位插件cordova-plugin-baidu-geolocation.git
- 关于Ionic3使用hewz/cordova-baidu-location插件定位的问题
- BaiduMap---百度地图官方Demo之热力图功能(介绍如何以热力图形式显示用户自有数据)
- 百度地图 baiduMap(一) 基本显示
- Ionic 热更新插件 cordova-hot-code-push-plugin的运用
- ionic 之cordova 极光推送jpush和百度定位插件结合使用之定位失效问题解决办法
- ionic工程引入cordova plugin camera 插件编译报错问题总结
- android 通过百度地图定位获取坐标在导航地图上面显示,坐标发生偏移
- ionic添加cordova-plugin-camera拍照插件后build报错
- ionic2中利用自定义cordova插件(Plugin)ts调iOS原生的值(iOS原生的值传给ts)
- ionic项目中手机状态栏显示使用$cordovaStatusbar插件
- 百度地图 ld: framework not found BaiduMapAPI_Location 或 高德地图 ld: framework not found AMapLocationKit
- ionic项目中手机状态栏显示使用$cordovaStatusbar插件
- BaiduMap---百度地图 SDK v3.0.0 (二) 定位与结合方向传感器
- 百度地图(BaiduMap)定位工具类封装和使用
- Ionic App 更新插件cordova-plugin-app-version
- cordova ionic 添加百度地图定位
- ionic学习之Android6.0 运行时权限插件cordova-plugin-android-permissions
- Ionic 调用百度地图插件定位获取不到权限