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框裏顯示地址