微信小程序中wx.chooseLocation()打开地图选择位置，配合腾讯地图进行逆地址解析

准备工作

1. 打开小程序后台-开发管理-接口设置 开通wx.chooseLocation接口

小程序管理后台

2. 打开腾讯地图-控制台-我的应用 创建应用并增加key

腾讯地图官网

• 启用产品选择WebServiceAPI，域名白名单。
• 小程序安全域名设置，在小程序管理后台中设置request合法域名，添加apis.map.qq.com

wx.chooseLocation() 使用方法

打开地图显示当前位置，在下方显示附近poi列表。api文档

• 使用api需要在app.json中requiredPrivateInfos配置项内加上chooseLocation。

"requiredPrivateInfos": [
  "chooseLocation"
],

• api是以Promise风格调用的，所以直接调用wx.chooseLocation() 打开地图。
• const location = await wx.chooseLocation()：地图界面选择地址点击确定后，使用await接收选择成功的返回信息并使用一个变量存放对象。也可以在success（res）成功回调函数方法内接收返回值。
• 成功后的返回参数有longitude经度、latitude维度、name位置名称、address详细地址。

腾讯地图的使用方法

腾讯地图微信小程序jsSDK逆地址解析文档

• 下载腾讯地图微信小程序JavaScriptSDK。放到小程序的源码目录下如libs文件夹下。
• import QQMapWX from "@/libs/qqmap-wx-jssdk.min"：导入QQMapWX腾讯地图实例。
• qqmapwx.reverseGeocoder({longitude,latitude},success: (res){})：reverseGeocoder方法第一个参数传入经纬度，成功后success回调函数返回地理位置信息。具体返回参数信息文档中有。

完整代码

  async onTapLocation() {
    // console.log(await wx.chooseLocation());
    const { latitude, longitude, name } = await wx.chooseLocation();
    // 使用 reverseGeocoder 方法进行逆地址解析
    // https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodReverseGeocoder
    this.data.qqmapwx.reverseGeocoder({
      location: {
        longitude,
        latitude,
      },
      success: (res) => {
        console.log(res);
        // 获取省市区、省市区编码
        const { province, city, district } = res.result.ad_info;

        // 获取街道、门牌 (可能为空)
        const { street, street_number } = res.result.address_component;

        // 获取标准地址
        const {
          recommend, // 经过腾讯地图优化过的描述方式，更具人性化特点
        } = res.result.formatted_addresses;

        // // 对获取的数据进行格式化、组织，然后赋值给 data 中的字段
        this.setData({
          // 省
          "region[0]": province,

          // 市
          "region[1]": city,

          // 县
          "region[2]": district,

          // 详细地址以及完整地址，在以后开发中根据产品的需求来进行选择、处理即可
          // 组织详细地址
          full_address: street + street_number + name,
        });
      },
      fail: (err) => {
        console.log(err);
      },
    });
  },