欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue腾讯地图经纬度逆解析

程序员文章站 2022-06-11 20:37:37
...
申请自己的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框里显示地址

vue腾讯地图经纬度逆解析