微信小程式+騰訊地圖 獲取定位與地圖選點插件

一、思路

通過 wx.getLocation 回傳經緯度傳到后臺，后臺呼叫騰訊地圖提供的逆地址決議回傳用戶位置；
給個按鈕讓用戶點擊呼叫騰訊地圖選點插件，自己選擇位置修改

二、逆地址決議

2.1. app.json

.小程式頁面代碼
app.json必須加入

"permission": {
    "scope.userLocation": {
      "desc": "你的位置資訊將用于小程式位置介面的效果展示"
    }
  }

2.2. 頁面加入

onLoad: function (options) {
    let that = this;
    that.authodAdress();
  }
 
authodAdress() {
    //是否授權獲取地址
    let that = this;
    wx.getSetting({
      success: (res) => {
        if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
          wx.showModal({
            title: '是否獲取當前位置',
            content: '需要獲取您的地理位置，請確認授權，否則無法獲取您所需資料',
            success: function (res) {
              if (res.cancel) {
                wx.showModal({
                  title: '授權失敗',
                  icon: 'success',
                  duration: 1000
                })
              } else if (res.confirm) {
                wx.openSetting({
                  success: function (dataAu) {
                    if (dataAu.authSetting["scope.userLocation"] == true) {
                      wx.showModal({
                        title: '授權成功',
                        icon: 'success',
                        duration: 1000
                      })
                      that.getAddress();
                    } else {
                      wx.showModal({
                        title: '授權失敗',
                        icon: 'success',
                        duration: 1000
                      })
                    }
                  }
                })
              }
            }
          })
        } else if (res.authSetting['scope.userLocation'] == undefined) {
          that.getAddress();
        } else {
          that.getAddress();
        }
      }
    })
  },
 
 getAddress() {
    //獲取地址
    let that = this;
    wx.getLocation({
      type: 'wgs84',
      isHighAccuracy: true,//開啟高精度定位
      success(res) {
        console.log("獲取地理位置----------")
        console.log(res)
　　//這里改成自己封裝好呼叫后臺的api
        locationApi.getLocationConvert(res).then((apiRes) => {
          console.log("呼叫后臺回傳地址--------")
          console.log(apiRes)
        })
      }
    })
  },

2.3. 后臺代碼

//逆地址決議url
private static final String locationUrl = "https://apis.map.qq.com/ws/geocoder/v1/";

/**
 * 逆地址決議
 *
 * @param lat 緯度
 * @param lng 經度
 **/
public static HttpClientResult convertPosition(String lat, String lng) throws Exception {
    Map<String, String> param = new HashMap<>(16);
    param.put("location", String.format("%s,%s", lat, lng));
    param.put("key", "騰訊地圖開發密鑰");
    param.put("output", "json");
　　//改成自己封裝好的呼叫介面
    HttpClientResult httpClientResult = getHttpClientResult(locationUrl, param);
    if (!httpClientResult.getContent().isEmpty()) {
        String all = httpClientResult.getContent().toJSONString().replaceAll("(?<=\"lat\":\\s)(\\d+\\.\\d+)", "\"$1\"").replaceAll("(?<=\"lng\":\\s)(\\d+\\.\\d+)", "\"$1\"");
        httpClientResult.setContent(JSONObject.parseObject(all));
    }
    return httpClientResult;
}

注意：在微信開發工具里，點擊取消授權之后在進來點擊確定，可能無法進入用戶權限設定頁面，在真機上除錯就沒問題
成功實體：

三、地圖插件呼叫

3.1. app.json加入

"plugins": {
    "chooseLocation": {
      "version": "1.0.5",
      "provider": "wx76a9a06e5b4e693e"
    }
  }

3.2. js頁面加入

const chooseLocation = requirePlugin('chooseLocation');//匯入插件
 
onShow: function () {
    let that = this;
    // 從地圖選點插件回傳后，在頁面的onShow生命周期函式中能夠呼叫插件介面，取得選點結果物件
    const location = chooseLocation.getLocation();// 如果點擊確認選點按鈕，則回傳選點結果物件，否則回傳null
  }
 
showMap() {
    //顯示地圖
    const key = ""; //使用在騰訊位置服務申請的key
    const referer = '星火之志'; //呼叫插件的app的名稱
    wx.navigateTo({
      url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer
    });
 
    //老版本呼叫
    // wx.chooseLocation({
    //   success: function(e) {
    //     console.log(e)
    //     t.setData({
    //       // now_location_name: e.address,
    //       // now_location_lat: e.latitude,
    //       // now_location_lng: e.longitude,
    //       // now_detail_address: e.name
    //     });
    //   },
    //   fail: function(t) {console.log(t)},
    //   complete: function(t) {console.log(t)}
    // });
  }

3.3. wxml頁面

<button bindtap="showMap" style="margin-top:10px">選擇位置</button>

注：可能在微信開發者工具上呼叫時會報錯，不過在真機上除錯就沒問題

成功截圖: