微信小程式和騰訊地圖結合一鍵擷取使用者所在位址資訊

微信小程式開發中，經常需要擷取使用者的具體位置，而僅僅通過wx的API無法實作這個功能，通過wx.getLocation和騰訊的qqmap-wx-jssdk.js檔案可以進行擷取到具體到門牌号的地理位置，詳細操作如下

• wx.getLocation是常用的微信API，可以擷取使用者的經緯度，使用很簡單，如下圖所示(來自官網)，也可以看官網官網位址https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html

• 

  

• qqmap-wx-jssdk.js可以将經緯度轉換為具體的位址，可以定位到使用者的門牌号，是一個超實用的功能，使用步驟如下
  • 下載下傳qqmap-wx-jssdk.js檔案，位址如下：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

    

• 建立密鑰，位址如下：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/qqMapwx

  

  • 點選進入界面如下，注意建立時候需要勾選WebserviceAPI才可以在微信小程式中使用,勾選後點選儲存即可

    

注意，下面代碼需要添加您的密鑰，同時需要修改qmap-wx-jssdk.js的路徑，還需要在data添加一個address的變量即可

// 擷取使用者所在地資訊
  // 使用騰訊地圖
  getAddress() {
  	// 注意，将that修改為this
    let that=this;
    // 在https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview位址下載下傳qqmap-wx-jssdk.js檔案
    let Map = require('../../lib/qqmap-wx-jssdk.js');
    // 在https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/qqMapwx建立密鑰
    let map = new Map({
      key: '您的密鑰'
    });
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        // 将坐标發送到騰訊背景進行解析定位
        map.reverseGeocoder({
          location: {
            latitude: res.latitude,
            longitude: res.longitude
          },
          success: function (addressRes) {
            let address = addressRes.result.address_component
            that.setData({
              address: {
                province: address.province,//省
                city: address.city,//市
                district:address.district,//區
                street:address.street,//街道
                street_number:address.street_number//門牌号
              }
            })
            console.log(that.data.address)
          },
          fail(err) {
            console.log(err);
          }
        })
      }
    })
  }
           

• 輸出如下