欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-13 23:46:38
...

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

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

main.js 中添加一下代码

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

之后需要去腾讯地图位置服务中注册一个账号并申请key
vue web项目中调用腾讯地图API获取当前位置的经纬度
回到我们的需要获取的页面中填入一下代码`

 <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就是之前申请的
vue web项目中调用腾讯地图API获取当前位置的经纬度
之后去运行项目,会发现一个报错但是手动拼接url路径放入浏览器中又可以获取然后去百度了一下发现是跨域问题搜索到了vue-jsonp
vue web项目中调用腾讯地图API获取当前位置的经纬度
vue web项目中调用腾讯地图API获取当前位置的经纬度

第二次 使用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>

这里为第一种写法

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

第二种写法

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

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