微信小程序開發學習--獲取位置信息

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="width: 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  
      });      
    },