微信小程序+腾讯地图 获取定位与地图选点插件

腾讯位置服务官网：
https://lbs.qq.com

一、思路

通过 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>

注：可能在微信开发者工具上调用时会报错，不过在真机上调试就没问题

成功截图: