ionic用插件(cordova-plugin-baidumaplocation)定位并调百度地图在上面显示

17 篇文章 0 订阅
3 篇文章 0 订阅

之前研究了定位,想用百度地图,但是用百度地图的
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=自己的ak地址"></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

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 21
    评论
百度地图定位Cordova插件,支持Android,IOS 可以在此地址查看example 基于百度地图Android版定位SDK(v7.1)以及百度地图IOS SDK (v3.2.1) 一,申请Android及IOS版密钥 申请密钥Android定位SDK 每一个AndroidManifest.xml 中的package属性 对应一个AK,不可混用 iOS SDK开发密钥 每一个Bundle Identifier 对应一个AK,不可混用 二,安装插件```` cordova plugin add cordova-plugin-baidumaplocation --variable ANDROID_KEY="" --variable IOS_KEY="" //此处的API_KEY_XX来自于第一步,直接替换,也可以最后跟 --save 参数,将插件信息保存到config.xml中 //如果只需要Android端或者IOS端,可以只填写一个相应的AK,但是都不填肯定不行 三,使用方法 // 进行定位 baidumap_location.getCurrentPosition(function (result) {     console.log(JSON.stringify(result, null, 4)); }, function (error) { }); 获得定位信息,返回JSON格式数据: {     "time": "2017-02-25 17:30:00",//获取时间     "latitude": 34.6666666,//纬度     "lontitude": 117.8888,//经度     "radius": 61.9999999,//半径     //--------Android 独享 begin     "locType": 161,//定位类型                                                 "locTypeDescription": "NetWork location successful!",//定位类型解释        "userIndoorState": 1,//是否室内                                          //--------Android 独享 end     //--------IOS 独享 begin     "title": "我的位置",//定位标注点标题信息     "subtitle": "我的位置",//定位标注点子标题信息     //--------IOS 独享 end } 具体字段内容请参照: Android版 BDLocation v7.1 IOS版 BMKUserLocation 如果Android版获取到的信息是: {     "locType": 505,     "locTypeDescription": "NetWork location failed because baidu location service check the key is unlegal, please check the key in AndroidManifest.xml !",     "latitude": 5e-324,     "lontitude": 5e-324,     "radius": 0,     "userIndoorState": -1,     "direction": -1 } 说明Key有问题,可以检查下生成的AndroidManifest.xml文件里面是否有如下信息                                                           如果没有,说明插件使用不当,尝试重新安装,如果有这些信息,说明Key与当前程序AndroidManifest.xml 中的package名不一致,请检查Key的申请信息是否正确 四,查看当前安装了哪些插件 cordova plugin ls 五,删除本插件 cordova plugin rm cordova-plugin-baidumaplocation 标签:cordova

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 21
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值