vue中使用腾讯地图 api逆地址解析 jsonp

原创于 2021-11-30 15:08:02 发布 · 2.6k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue 专栏收录该内容

79 篇文章

订阅专栏

本文介绍了如何在Vue.js项目中配置和使用腾讯地图API的逆地址解析功能。首先，详细说明了如何在lbs.qq.com上申请和管理Key。接着，通过安装vue-jsonp插件来解决跨域问题，并在Vue组件中调用逆地址解析API，展示获取和处理返回数据的过程。最后，给出了可能出现的错误解决方案及其实现效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、首先去申请一个key，可以在`https://lbs.qq.com/`这个网站里申请。打开是下图这个样子的。

在这里插入图片描述

2、点击登录，绑定一些信息，手机号之类的，随后点进开发者信息里，如下图

在这里插入图片描述

3、点击key管理，创建新密钥，填写相应信息即可

在这里插入图片描述

4、创建好了点击添加key

在这里插入图片描述

5、key 配置`我这里是pc 所以我就选择了如下图`

在这里插入图片描述

6、保存好就生成了key

在这里插入图片描述

7、找到自己所需要的api `逆地址解析在这里`

在这里插入图片描述

8、了解接口及其所需要的参数

在这里插入图片描述

9、因为接口用到跨域`我们这儿选择在vue中使用JSONP`来解决

第一步安装npm install vue-jsonp --save
第二步引入 在main.js中

import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)

如果出现一下错误引入改为下列引入
import {VueJsonp} from ‘vue-jsonp’

在这里插入图片描述

第三步页面使用

    getAreaCode() {
      this.$jsonp("https://apis.map.qq.com/ws/geocoder/v1/?", {
        location: `${this.scenicDetail.latitude},${this.scenicDetail.longitude}`, // 经纬度
        key: "写你的key",
        output: "jsonp" // output必须jsonp   不然会超时
      }).then(res => {
        console.log(res, "腾讯地图");
        this.areaCode = res.result.ad_info.adcode;
      });
    },