一、功能介绍
通过获取客户端或终端设备IP地址来获取其当前所在地理位置,可以精确到市级,常用于显示当地城市天气预报、初始化用户城市等非精确定位场景。
二、密钥申请
1. 用户登录
打开腾讯位置服务主页:点击右上角的登录按钮:
2. 验证信息
点击控制台,进入开发者信息界面,补全基本用户信息,完成验证。
3. 申请密钥
点击左侧key与配额下的key管理:
点击创建新密钥,填写Key名称、描述、验证码,等待审核通过:
创建成功后,可以在管理界面查看到密钥信息:
4. 密钥配置
密钥申请通过后,可以点击设置按钮修改名称及描述,并可以选择启用的产品,以及对调用规则进行限制:
同时,可以在查看配额界面查看各接口的用量情况:
三、操作说明
1. 接口文档入口
滑动到上方菜单的开发文档 -> 选择服务端下的WebService API:
点击左侧的IP定位:
2. 接口测试
可以直接使用Postman工具来测试,或者使用Postwomen(Postman他女朋友,唉,连工具都成双入对了,写个代码都要被虐,罢了,好好打工)。
由文档可知,接口的请求类型为GET,不填写ip时会使用请求端的IP(为公网IP,对概念不清楚的小伙伴可以参考我的另一篇文章:IP地址有什么用?),默认的数据返回格式为JSON,并且可以设置回调函数(在使用案例中演示)。
3. 测试结果
只填写必要的key参数,返回结果如下:
{ "status": 0, "message": "query ok", "result": { "ip": "123.122.189.12", "location": { "lat": 39.90469, "lng": 116.40717 }, "ad_info": { "nation": "中国", "province": "北京市", "city": "北京市", "district": "", "adcode": 110000 } } }
字段含义可见下表(可在接口文档中找到):
四、使用案例
在代码中调用时,可以在服务端发送请求,也可以直接在客户端直接发送请求。在企业应用开发中,如果是web应用,应尽量保证在服务端处理,防止key泄露。
本文为简化案例及方便演示回调,直接在前端页面中发送请求,真正整合进项目时请综合考虑。
1. 正常接收json
直接使用jQuery的ajax即可在回调函数(success)中获取到数据,可以对结果进一步解析使用。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $.ajax({ type : 'get', url : 'https://apis.map.qq.com/ws/location/v1/ip?key=替换为自己的key', dataType : 'json', success : function(data){ console.log(data); } }) </script> </head> <body> </body> </html>
2. 使用jsonp回调
请求时,指定返回类型为jsonp,同时添加callback参数,指定回调函数为test:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> function test(data){ console.log("data:"); console.log(data); } $.ajax({ type : 'get', url : 'https://apis.map.qq.com/ws/location/v1/ip?key=替换为自己的key&output=jsonp&callback=test', dataType : 'jsonp' }) </script> </head> <body> </body> </html>
3. 完整案例源码
五、视频直达
腾讯位置 - 服务端IP定位
写在结尾:作者力求做到将每个知识点细化,并且对于有关联的知识点都会使用传送门挂载链接。文章采用:“文字 + 配图 + 视频”的方式来进行展现,均是挤时间所作,希望看到这里能留下评论点个赞,略表支持!