微信小程序开发学习--获取位置信息

1、微信小程序地图展示位置信息

获取用户的位置信息，最开始使用了微信小程序提供的getlocation来获取用户的定位，能够得到用户的经纬度信息，（注：getloaction需要用户授权scope.userLocation）结合map组件能够得到用户的详细定位，代码如下：

<map id="map" longitude="{{location.longitude}}" latitude="{{location.latitude}}" scale="14" bindcontroltap="controltap" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style=" 100%; height: 100vh;"></map>
<button class='login' bindtap='loginView'>登录/注册</button>

 onLoad: function () {
      wx.getLocation({
        success: res=> {
          console.log(res);
          this.setData({
            location: res,
          })
          // console.log(app.globalData.location);
        },
      })
}

实现效果如下图：

微信小程序也支持在地图上选点，获取定位信息（wx.chooseLocation）和使用微信内置地图查看位置（wx.openLocation）

2、结合百度地图获取位置信息

微信小程序的接口，只能得到经纬度，但有时候我们需要得到具体的城市或者区域信息，这就需要借助百度地图了。

第一步：先到百度开放平台http://lbsyun.baidu.com申请ak（链接地址为：http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key）
第二步：在服务器配置中添加百度地图的服务器（https://api.baidu.com）
第三步：下载百度地图的api ，链接：http://download.csdn.net/detail/michael_ouyang/9754015
第四步：引入JS模块，将下载的js放到工程目录下
第五步：在所需的js文件内导入js
var bmap = require('../../libs/bmap-wx/bmap-wx.js');

第六步：编辑代码，此处我获得的是城市信息，可以log出信息，选择自己要显示的信息，用setData的方式放入数据中进行展示即可

 var BMap = new bmap.BMapWX({   
        ak: that.data.ak,
    });   
        console.log(BMap)    
    var fail = function(data) {   
        console.log(data);  
    };   
    var success = function(data) {   
        //返回数据内，已经包含经纬度  
        console.log(data);  
        //使用wxMarkerData获取数据  
        //  = data.wxMarkerData;  
wxMarkerData=data.originalData.result.addressComponent.city
        //把所有数据放在初始化data内  
        console.log(wxMarkerData)
        that.setData({   
            // markers: wxMarkerData,
            // latitude: wxMarkerData[0].latitude,  
            // longitude: wxMarkerData[0].longitude,  
            address: wxMarkerData 
        });  
    }   
    // 发起regeocoding检索请求   
    BMap.regeocoding({   
        fail: fail,   
        success: success  
    });      
  },