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,完成!
vue工程中,如何查询用户访问的地理位置 + vue中的jsonp的更多相关文章
- 项目一:第十三天 1、菜单数据管理 2、权限数据管理 3、角色数据管理 4、用户数据管理 5、在realm中动态查询用户权限,角色 6、Shiro中整合ehcache缓存权限数据
1 课程计划 菜单数据管理 权限数据管理 角色数据管理 用户数据管理 在realm中动态查询用户权限,角色 Shiro中整合ehcache缓存权限数据 2 菜单数据添加 2.1 使用c ...
- Ant Design框架中不同的组件访问不同的models中的数据
Ant Design框架中不同的组件访问不同的models中的数据 本文记录了我在使用该框架的时候踩过的坑,方便以后查阅. 一.models绑定 在某个组件(控件或是页面),要想从某个models中获 ...
- 在realm中动态查询用户的权限&角色
@Controller @Scope("prototype") @Namespace("/") @ParentPackage("struts-defa ...
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
功能:在textbox中输入内容,动态从数据库模糊查询显示到下拉框中,以供选择 1.建立一aspx页面,html代码 <HTML> <HEAD> <title>We ...
- 在数据库中sql查询很快,但在程序中查询较慢的解决方法
在写java的时候,有一个方法查询速度比其他方法慢很多,但在数据库查询很快,原来是因为程序中使用参数化查询时参数类型错误的原因 select * from TransactionNo, fmis_Ac ...
- 优化mybatis框架中的查询用户记录数的案例
通过对mybatis框架的中核心接口和类的分析,发现之前写的那个小demo是有问题的.现在对其进行部分优化. 如果存在多个功能的时候,势必会有很多重复的代码,如,创建sqlsession对象,关闭sq ...
- 在 sql server 中,查询 数据库的大小 和 数据库中各表的大小
其实本来只想找一个方法能查询一下 数据库 的大小,没想到这个方法还能查询数据库中 各个数据表 的大小,嗯,挺好玩的,记录一下. MSDN资料:https://msdn.microsoft.com/zh ...
- PostgreSQL中如何查询在当前的哪个数据库中
[pgsql@localhost bin]$ ./psql -d tester psql () Type "help" for help. tester=# select curr ...
- Django查询一个权限中包含哪些用户
Django查询一个权限中包含哪些用户 Django的Permission对象中没有直接查询相关用户的信息,而都是通过User对象来查询某个用户有哪些权限,例如: user.objects.get(u ...
随机推荐
- BZOJ 1180 [CROATIAN 2009]OTOCI // BZOJ 2843 极地旅行社 // Luogu P4321 [COCI 2009] OTOCI / 极地旅行社 (LCA板题)
emmm-标题卡着长度上限- LCT板题-(ε=ε=ε=┏(゜ロ゜;)┛) CODE #include <cctype> #include <cmath> #include & ...
- (vue.js)Vue element tab 每个tab用一个路由来管理?
(vue.js)Vue element tab 每个tab用一个路由来管理? 来源:网络整理 时间:2017/5/13 0:24:01 关键词: 关于网友提出的“ (vue.js) ...
- 強悍的Linq
在使用Linq轉化XML,ActiveDirectory,Datatable,Array,List,Dictionary后意識到Linq的強大.VS居然還提供專門的LINQ Explorer,不覺明厲 ...
- BZOJ 2346: [Baltic 2011]Lamp Dijkstra
不难发现如果一个边的方向改变,就一定不会改回来(这样肯定不是最短路). 所以就直接建双向边,边权为 $0$ 代表不改变,边权为 $1$ 代表改变,跑一个最短路即可. #include <bits ...
- Codevs 4909 寂寞的堆
4909 寂寞的堆 时间限制: 1 s 空间限制: 8000 KB 题目等级 : 大师 Master 题目描述 Description 堆,是一种神奇的数据结构 不寂寞的堆,是一棵满二叉树,其儿子节点 ...
- 关于tensorflow里面的tf.contrib.rnn.BasicLSTMCell 中num_units参数问题
这里的num_units参数并不是指这一层油多少个相互独立的时序lstm,而是lstm单元内部的几个门的参数,这几个门其实内部是一个神经网络,答案来自知乎: class TRNNConfig(obje ...
- 调用七牛云存储文件,返回url
文档地址:https://developer.qiniu.com/kodo/sdk/1283/javascript#2 npm引入 npm install qiniu-js 例子: var obser ...
- oracle数据库体系结构
一.oracle数据库体系结构 基本组成: Oracle server:一般情况下是一个instance和一个database组成 一般:1个instance只能对应一个数据库. 特殊:1个数据库可以 ...
- Python常用模块之hashlib模块
1.hashilib模块的功能 python的hashlib提供了常见的摘要算法,如MD5, SHA1等等. 什么是摘要算法呢?摘要算法又称哈希算法.散列算法.它通过一个函数,把任意长度的数据转换成一 ...
- Django常见命令
在Django的使用过程中需要使用命令让Django进行一些操作,例如创建Django项目,启动Django程序,创建新的APP,数据库迁移等. 1. 创建Django项目 新建一个文件夹来存放项目文 ...