jsonp 实现跨域请求 解析经纬度获取城市名称 腾讯地图

第一步：

添加依赖npm install vue-jsonp --save

第二步
main.js 配置
在vue cli项目main.js中添加

import { VueJsonp } from ‘vue-jsonp’ // 网上很多博客引用不加{}，会报错

Vue.use(VueJsonp)

第三步 直接在vue组件中使用
// 因为引入了vue-jsonp，所以可以直接使用this.$jsonp,Vue.use(VueJsonp）方法里把$jsonp赋给vue原型了：Vue.prototype.$jsonp = jsonp

<template>
  <div>
   <div @click="getlocation">点击触发</div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      didian: undefined
    }
  },
  mounted() {
  },
  methods: {
    getlocation() {
        console.log('解析地理位置');
       let url =  'https://apis.map.qq.com/ws/geocoder/v1/'
       let key = '****-****-****-****-****-****'
      let location= '31.245353,121.665946'
      this.$jsonp(url, {
          key:key,
          get_poi:"1",
          location:location,
          output:'jsonp'
      }).then((res) => {
        console.log('地理位置',res)
      }).catch((err)=>{
          console.log(err);
      })

    }
  }

}
</script>

<style>
</style>