有一个需求,就是当用户访问你们公司的网站时,需要查到这位用户的地理位置(通过电脑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,完成!

vue工程中,如何查询用户访问的地理位置 + vue中的jsonp的更多相关文章

  1. 项目一:第十三天 1、菜单数据管理 2、权限数据管理 3、角色数据管理 4、用户数据管理 5、在realm中动态查询用户权限,角色 6、Shiro中整合ehcache缓存权限数据

    1 课程计划 菜单数据管理 权限数据管理 角色数据管理 用户数据管理 在realm中动态查询用户权限,角色 Shiro中整合ehcache缓存权限数据         2 菜单数据添加 2.1 使用c ...

  2. Ant Design框架中不同的组件访问不同的models中的数据

    Ant Design框架中不同的组件访问不同的models中的数据 本文记录了我在使用该框架的时候踩过的坑,方便以后查阅. 一.models绑定 在某个组件(控件或是页面),要想从某个models中获 ...

  3. 在realm中动态查询用户的权限&角色

    @Controller @Scope("prototype") @Namespace("/") @ParentPackage("struts-defa ...

  4. Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中

    功能:在textbox中输入内容,动态从数据库模糊查询显示到下拉框中,以供选择 1.建立一aspx页面,html代码 <HTML> <HEAD> <title>We ...

  5. 在数据库中sql查询很快,但在程序中查询较慢的解决方法

    在写java的时候,有一个方法查询速度比其他方法慢很多,但在数据库查询很快,原来是因为程序中使用参数化查询时参数类型错误的原因 select * from TransactionNo, fmis_Ac ...

  6. 优化mybatis框架中的查询用户记录数的案例

    通过对mybatis框架的中核心接口和类的分析,发现之前写的那个小demo是有问题的.现在对其进行部分优化. 如果存在多个功能的时候,势必会有很多重复的代码,如,创建sqlsession对象,关闭sq ...

  7. 在 sql server 中,查询 数据库的大小 和 数据库中各表的大小

    其实本来只想找一个方法能查询一下 数据库 的大小,没想到这个方法还能查询数据库中 各个数据表 的大小,嗯,挺好玩的,记录一下. MSDN资料:https://msdn.microsoft.com/zh ...

  8. PostgreSQL中如何查询在当前的哪个数据库中

    [pgsql@localhost bin]$ ./psql -d tester psql () Type "help" for help. tester=# select curr ...

  9. Django查询一个权限中包含哪些用户

    Django查询一个权限中包含哪些用户 Django的Permission对象中没有直接查询相关用户的信息,而都是通过User对象来查询某个用户有哪些权限,例如: user.objects.get(u ...

随机推荐

  1. Python3-BaseType

    counter = 100 # 整型变量 miles = 1000.0 # 浮点型变量 name = "runoob" # 字符串 print(counter) print(mil ...

  2. Waiting (TTFB) 时间

    什么是 Waiting (TTFB) 时间 TTFB 是 Time to First Byte 的缩写,指的是浏览器开始收到服务器响应数据的时间(后台处理时间+重定向时间),是反映服务端响应速度的重要 ...

  3. 10 masterless、高可用、salt执行模块开发、sydic架构

    1.salt无master 官方文档: http://docs.saltstack.cn/topics/tutorials/quickstart.html 1.使用场景 1.在项目中使用salt,写一 ...

  4. [Algorithm] Max Chars Problem

    // --- Directions // Given a string, return the character that is most // commonly used in the strin ...

  5. struts2的Action中使用spring的@Transactional注解事务出错

    1.在Struts2使用的是spring管理对象. 使用spring的注解式事务配置, 在action的方法中直接使用事务遇到的问题. public class testAction extends ...

  6. virtualBox中有线和无线两种情况下centos虚拟机和本地机互ping的方案

    之前写微信点餐系统的时候,刚开始是无线连接,然后每次进去虚拟机ip和本地ip都会改变,所以每次都需要配置一下nginx,还有本地的路径.之后换有线连接,就研究了一下桥接模式有线情况下虚拟机静态ip设置 ...

  7. 理解TCP三次握手和四次挥手

    TCP相关知识 TCP是面向连接的传输层协议,它提供可靠交付的.全双工的.面向字节流的点对点服务.HTTP协议便是基于TCP协议实现的.(虽然作为应用层协议,HTTP协议并没有明确要求必须使用TCP协 ...

  8. jQuery的$符号

    jQuery使用$的原因是: 书写简洁, 相对于其他字符与众不同, 容易被记住. JQuery占用了两个变量: $ 和 jQuery. 当在代码中打印 $ 和 jQuery时: <script ...

  9. [bat]只更新svn部分文件夹

    游戏工程里的sdk文件夹,经常被svn认定为有毒文件. 后来关了权限之后,已拉取过的sdk文件夹还是会拉下来. 网上找了个方法,bat文件只更新部分文件. TortoiseProc /command: ...

  10. Leetcode题目96.不同的二叉搜索树(动态规划-中等)

    题目描述: 给定一个整数 n,求以 1 ... n 为节点组成的二叉搜索树有多少种? 示例: 输入: 3 输出: 5 解释: 给定 n = 3, 一共有 5 种不同结构的二叉搜索树: 1 3 3 2 ...