vue腾讯地图经纬度逆解析

申请自己的key 申请key

先写一个方法解析传进来的经纬度

  analysis (data1) {
      var data = {
        location: data1.lat + ',' + data1.lng,
        /* 换成自己申请的key */
        key: '换成自己申请的key'
      }
      data.output = 'jsonp'
      return new Promise((resolve, reject) => {
      // eslint-disable-next-line no-undef
        $.ajax({
          type: 'get',
          dataType: 'jsonp',
          data: data,
          jsonp: 'callback',
          jsonpCallback: 'QQmap',
          url: 'http://apis.map.qq.com/ws/geocoder/v1/?',
          success: function (json) {
          /* json对象转为文本 var aToStr=JSON.stringify(a); */
            console.log(json.result)//这个就是返回的地址详细信息,下面我只取了一个地址名称
            resolve(json.result.formatted_addresses.recommend)
          },
          // eslint-disable-next-line handle-callback-err
          error: function (err) { alert('服务端错误，请刷新浏览器后重试') }
        })
      })
    },

调用上面的方法获取地址,我这里是需要获取到地址之后才能进行下一步,所以我使用了async await

var thit = this // 为了保证作用域都相同
qq.maps.event.addListener(marker, 'mouseup', async function (e) {
              // 获取经纬度 e.latLng
              // 获取坐标 e.cursorPixel
              // thih.analysis(e.latLng)
              let name = await thit.analysis(e.latLng)
              //name 就是上面函数返回的地址
              console.log(name)
              info.open()
              info.setContent('<div style="text-align:center;white-space:nowrap;' + 'margin:10px;">地址:' + name + '</div>')
              info.setPosition(e.latLng)
              label1.setContent('上班')
              label1.setPosition(e.latLng)
              thih.dataTable.workon_latitude = e.latLng.lat
              thih.dataTable.workon_longitude = e.latLng.lng
            })

这个点是可以拖动的,拖动停止marker框里显示地址