小程序实现根据经纬度逆地址解析（坐标位置描述）

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情

“金秋十月，我要连续30天更文，做劳模，拿手机摄影神器！点击查看活动详情 “即可成功参与

今天实现的需求是根据经纬度获取地理位置（逆地址解析），需要用到小程序的getLocation（获取经纬度）和腾讯位置服务的api（逆地址解析）,话不多说直接上代码：

    let signature = () => {
      let url_ticket = ''
      url_ticket = window.location.href.split('#')[0]
      getSignature({ url: encodeURIComponent(url_ticket) }).then((res: any) => {
        wx.config({
          beta: true,
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: '', // 必填，公众号的唯一标识
          timestamp: res.result.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.result.nonceStr, // 必填，生成签名的随机串
          signature: res.result.signature,// 必填，签名
          jsApiList: ['getLocation'] // 必填，需要使用的JS接口列表
        });
        wx.ready(() => {
          wx.getLocation({
            type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: (res: any) => {
              jsonp(`https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}`, {
                key: '',//必填腾讯位置服务的key
                get_poi: 1,
                output: 'jsonp' //必填跨域
              }).then((res) => {
                if (res.status === 0) {
                  const address = res.result.address_component.province + res.result.address_component.city + res.result.address_component.district + res.result.address_component.street + res.result.address_component.street_number
                  alert(address)
                  console.log(address, res)
                } else {
                  Toast.fail(res.message);
                }
              })
            },
            fail: (err: any) => {
              console.log(err, 'faill')
            }
          })
        })
        wx.error((err: any) => {
          throw new Error(err)
        })
      })
    }

思路：

1、调用微信小程序的获取地理位置接口

wx.getLocation({
  type: 'wgs84', // 默认为wgs84的 gps 坐标，如果要返回直接给 openLocation 用的火星坐标，可传入'gcj02'
  success: function (res) {
    var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
    var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
    var speed = res.speed; // 速度，以米/每秒计
    var accuracy = res.accuracy; // 位置精度
  }
});

2、获取到经纬度后，开始逆解析（将经纬度转成地址位置），调用腾讯位置服务的WebService API里的逆地址解析（坐标位置描述）

 jsonp(`https://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490`, {
          key: '',//key
          get_poi: 1,
          output: 'jsonp'//解决跨域
        }).then((res) => {
          if (res.status === 0) {
            const address = res.result.address_component.province + res.result.address_component.city + res.result.address_component.district + res.result.address_component.street + res.result.address_component.street_number
            alert(address)
            console.log(address, res)
          } else {
            Toast.fail(res.message);
          }
        })

具体参数看官方文档lbs.qq.com/service/web…

完整代码：

     //页面加载获取经纬度，并且将经纬度转成汉字
    let signature = () => {
      let url_ticket = ''
      url_ticket = window.location.href.split('#')[0]
      getSignature({ url: encodeURIComponent(url_ticket) }).then((res: any) => {
        wx.config({
          beta: true,
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: '', // 必填，公众号的唯一标识
          timestamp: res.result.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.result.nonceStr, // 必填，生成签名的随机串
          signature: res.result.signature,// 必填，签名
          jsApiList: ['getLocation'] // 必填，需要使用的JS接口列表
        });
        wx.ready(() => {
          wx.getLocation({
            type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: (res: any) => {
              jsonp(`https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}`, {
                key: '', //key
                get_poi: 1,
                output: 'jsonp' //跨域
              }).then((res) => {
                if (res.status === 0) {
                  const address = res.result.address_component.province + res.result.address_component.city + res.result.address_component.district + res.result.address_component.street + res.result.address_component.street_number
                  alert(address)
                  console.log(res)
                } else {
                  Toast.fail(res.message);
                }
              })
            },
            fail: (err: any) => {
              console.log(err, 'faill')
            }
          })
        })
        wx.error((err: any) => {
          throw new Error(err)
        })
      })
    }

腾讯位置服务微信小程序JavaScript SDK 开发 官网：lbs.qq.com/miniProgram…