vue腾讯地图经纬度逆解析

最新推荐文章于 2024-09-03 15:52:06 发布

dragon_brg

最新推荐文章于 2024-09-03 15:52:06 发布

阅读量3.5k

点赞数 4

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_41359437/article/details/105201831

版权

本文介绍了如何在Vue.js项目中结合腾讯地图API，通过经纬度进行地址解析。首先，讲述了如何申请腾讯地图的API key。接着，提供了一个方法用于根据经纬度获取地址，并利用async await处理异步操作。最后，提到了地图上的marker点可以拖动，拖动停止后会显示当前位置的详细地址。

摘要由CSDN通过智能技术生成

申请自己的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)
          },