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

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

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

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

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

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

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

4、创建好了点击添加key

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

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

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

6、 保存好就生成了key

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

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

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

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

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

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

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

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

第三步 页面使用

    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;
      });
    },

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

效果图

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

上一篇:jsonp原理详解——终于搞清楚jsonp是啥了,mysql使用教程图解


下一篇:JSON学习8——jQuery 使用 JSONP