vue web项目中调用腾讯地图API获取当前位置的经纬度

vue web项目中调用腾讯地图API获取当前位置的经纬度

第一次尝试使用axios去获取经纬度

在main.js 中添加一下代码

import axios from 'axios'
axios.defaults.baseURL='#'
Vue.prototype.$http = axios
//这里学过vue使用过axios的人应该都可以看懂，就不做过多解释了

之后需要去腾讯地图位置服务中注册一个账号并申请key

回到我们的需要获取的页面中填入一下代码`

 <script>
 export default {
    name: 'Home',
    components: {
      HelloWorld
    },
    created() { 
      this.getlocation()
    },
    methods: {
    //这边使用了async，await去简化Promise并解构获取到的数据
    //其中axios中的 https://apis.map.qq.com/ws/location/v1/ip 是在下图中获取这里的key就是之前申请的
      async getlocation() {
        const {
          data: res
        } = await this.$http.get('https://apis.map.qq.com/ws/location/v1/ip', {
          params: {
            key: 'XOXBZ-MZWWD-CDX4H-PONXN-UA5PJ-D7FJN'
          }
        })
        console.log(res);
      }
    }
  }
</script>

这边使用了async，await去简化Promise并解构获取到的数据其中axios中的 https://apis.map.qq.com/ws/location/v1/ip 是在下图中获取这里的key就是之前申请的

之后去运行项目，会发现一个报错但是手动拼接url路径放入浏览器中又可以获取然后去百度了一下发现是跨域问题搜索到了vue-jsonp

第二次 使用vue-jsonp

使用过程中发现网上给的大部分方法全是坑
安装vue-jsonp

npm install vue-jsonp --save

在main.js中导入
记住这里，巨坑
下面是网上给的写法

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

然而官方的写法为

import { VueJsonp } from 'vue-jsonp'
Vue.use(VueJsonp）

添加完后在需要使用跨域的页面添加以下代码

<script>
  export default {
    name: 'Home',
    created() {
      //获取当前位置的经纬度
      var data = {
        key: "XOXBZ-MZWWD-CDX4H-PONXN-UA5PJ-D7FJN" //这个key就是你申请的**
      };
      var url = "https://apis.map.qq.com/ws/location/v1/ip"; //这个就是地理位置信息的接口
      data.output = "jsonp";
      this.$jsonp(url, data)
        .then(res => {
          console.log(res,123);
        })
        .catch(error => {
          console.log(error,456);
        });

    },
    methods: {

    }
  }
</script>

这里为第一种写法

然后报错

第二种写法

获取到了定位

欢迎各位大佬评论指导，指出不足