腾讯位置服务接入
这么炫酷的界面不想来看看吗?
腾讯位置服务
一、前期准备
- 账号注册
微信直接扫码登陆 - 申请开发者key
控制台->key与配额->key管理
- key设置
最好把每个独立的功能抽出来申请一个开发者key
这里我申请了两个 (反正又不花钱^ v ^)
进入key设置的界面
直接勾选WebServiceAPI就行✔
之后点保存
二、开发前准备
我想做的是一个根据用户此时的ip获取用户的位置之后查询当地的天气数据原理和实现都比较简单
- 作为一名合格的开发者,接触到一个新的东西第一步当然是要看它的开发文档了。
文档链接在这里WebService API 开发文档
定位到我们要使用的IP定位服务
看一下请求和响应字段
Request:
Response:
- 拿到一个陌生的接口当然是先自己测试以下,看看返回的数据是否符合接口文档的设计(虽然像腾讯这样的大厂不可能存在数据与文档不符合的情况),这是一个好习惯,可以有效防止开始开发之后因为数据不符与后端扯皮而造成摸鱼时间的减少。
- 打开posman
不知道为什么我的postman无法打开,看来之后要重新安装一下
(这不是减少我的摸鱼时间吗?)
还好有很多在线接口测试工具可以使用
这里我用了getman - 填好请求地址和参数key就可以愉快的发起请求了
- 点一下✔ 啪的一下,很快啊,数据就返回了
- 看一下响应字段和嵌套关系
status和message表示请求结果及状态
结构也相同,终于可以进入激动人心的开发环节了
三、开发流程
套用一个以前写的简单的模板
使用了jq封装好的ajax api也简化一下请求操作
主要代码如下:
const key = 'VOKBZ-XXXXX-XXXXX-XXXXX-XXXXX-EKBXF'
console.log(location)
window.onload = ()=>{
$.ajax({
url: 'https://apis.map.qq.com/ws/location/v1/ip?key='+key,
data: {
},
success: function(res){
$("#location").html(res.result.ad_info.province+'/'+res.result.ad_info.city)
}
})
}
是不是很简单?