• vue工程中,如何查询用户访问的地理位置 + vue中的jsonp


    有一个需求,就是当用户访问你们公司的网站时,需要查到这位用户的地理位置(通过电脑ip来访问)

    试了很多方法,感觉使用腾讯的位置服务api最好,返回的信息最全,包括经纬度,国家城市地区等。而其他绝大多数仅仅反馈了一个城市名。

    接下来就说一下怎么使用腾讯的位置服务获取用户访问的地理信息:

      一、首先在https://lbs.qq.com/console/setting.html这个网页中 , 申请你自己key,也就是密钥,有了这个密钥,你才有资格使用位置服务api;

      二、申请后,然后在官网上设置你的key,找到  key管理--》启用产品--》WebServiceAPI   选择授权IP  内容输入0.0.0.0-255.255.25.255

      三、然后在页面上进行使用就行了,但这个接口是跨域的,而腾讯给的方法是jsonp解决跨域,倘若是原生,我们可以直接用jq来进行jsonp跨域,

    可是axios根本不能进行jsonp跨域,网上查了半天,才找到vue中原来有一个依赖   vue-jsonp  用于专门解决jsonp跨域

      接下来就说一下如何使用jsonp来进行腾讯位置信息api的获取:

      1.安装下载vue-jsonp依赖

    cnpm i -S vue-jsonp

      2.在main.js中导入vue-jsonp

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

      3.请求接口,获取数据

        created() {
                var data = {
                    key: "WDTBZ-EOPRG-5ONQY-IDVMO-NXIIK-C4B7A"  //这个key就是你申请的密钥
                }; 
                var url = "https://apis.map.qq.com/ws/location/v1/ip"; //这个就是地理位置信息的接口
                data.output = "jsonp";
                this.$jsonp(url, data)
                    .then(res => {
                      console.log(res) 
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },


        //res:{status: 0, message: "query ok", result: {…}}
        //result中。就是各种信息。比如经纬度,国家,地区等等

    ok,完成!

  • 相关阅读:
    0-1 RSS订阅
    4-1 文件管理
    3-2 LInux文件管理
    解决docker容器开启端口映射后,会自动在防火墙上打开端口的问题
    samba服务的基本配置
    ftp服务的基本配置
    Linux-Bash终端快捷键
    对systemV和systemd的简单理解(服务方面)
    分析FAT32内部结构-入门篇-
    分享一下今天遇到的两个问题,一个是关于C语言内存泄漏问题,另一个是关于Linux下grep使用时的问题
  • 原文地址:https://www.cnblogs.com/wangqi2019/p/11311448.html
Copyright © 2020-2023  润新知