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

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  
      });      
    },