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

之前研究了定位，想用百度地图，但是用百度地图的
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

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

猜你喜欢