腾讯位置 - 关键词输入提示(结尾附视频)
写在前面:博主是一只经过实战开发历练后投身培训事业的“小山猪”,昵称取自动画片《狮子王》中的“彭彭”,总是以乐观、积极的心态对待周边的事物。本人的技术路线从Java全栈工程师一路奔向大数据开发、数据挖掘领域,如今终有小成,愿将昔日所获与大家交流一二,希望对学习路上的你有所助益。同时,博主也想通过此次尝试打造一个完善的技术图书馆,任何与文章技术点有关的异常、错误、注意事项均会在末尾列出,欢迎大家通过各种方式提供素材。
- 对于文章中出现的任何错误请大家批评指出,一定及时修改。
- 有任何想要讨论和学习的问题可联系我:zhuyc@vip.163.com。
- 发布文章的风格因专栏而异,均自成体系,不足之处请大家指正。
腾讯位置 - 关键词输入提示(结尾附视频)
本文关键字:腾讯位置、关键词输入提示、服务端、使用教程
文章目录
- 腾讯位置 - 关键词输入提示(结尾附视频)
- 一、功能介绍
- 二、密钥申请
- 1. 用户登录
- 2. 验证信息
- 3. 申请密钥
- 4. 密钥配置
- 三、操作步骤
- 1. 开发文档入口
- 2. 接口测试
- 3. 返回结果
- 四、使用案例
- 1. 基础界面
- 2. 动态响应
- 3. 完整案例源码
- 五、视频直达
一、功能介绍
关键词输入提示接口可以用于获取输入关键字的补完与提示,帮助用户快速输入。可以通过配合前端程序实现Autocomplete(自动完成)的效果。
二、密钥申请
1. 用户登录
打开腾讯位置服务主页:https://lbs.qq.com,点击右上角的登录按钮:
2. 验证信息
点击控制台,进入开发者信息界面,补全基本用户信息,完成验证。
3. 申请密钥
点击左侧key与配额下的key管理:
点击创建新密钥,填写Key名称、描述、验证码,等待审核通过:
创建成功后,可以在管理界面查看到密钥信息:
4. 密钥配置
密钥申请通过后,可以点击设置按钮修改名称及描述,并可以选择启用的产品,以及对调用规则进行限制:
同时,可以在查看配额界面查看各接口的用量情况:
三、操作步骤
1. 开发文档入口
滑动到上方菜单的开发文档 -> 选择服务端下的WebService API:
点击左侧的关键词输入提示:
直达地址:https://lbs.qq.com/service/webService/webServiceGuide/webServiceSuggestion
2. 接口测试
可以直接使用Postman工具来测试,或者使用Postwomen(Postman他女朋友,唉,连工具都成双入对了,写个代码都要被虐,罢了,好好打工)。
由文档可知,接口的请求类型为GET,默认的数据返回格式为JSON。必填参数有三个:
- key:开发者密钥
- keyword:搜索关键字
- region:搜索范围,必填的限制条件(可以通过region_fix来设置是否扩大范围)
3. 返回结果
以下为返回结果,为了完整展示数据结构,删减了data中的部分数据:
{"status": 0,"message": "query ok","count": 100,"data": [{"id": "14178584199053362783","title": "中关村","address": "北京市海淀区","category": "地名地址:热点区域:商圈类","type": 0,"location": {"lat": 39.981047,"lng": 116.320787},"adcode": 110108,"province": "北京市","city": "北京市","district": "海淀区"},{"id": "2199027905900","title": "中关村[地铁站]","address": "地铁4号线大兴线","category": "基础设施:交通设施:地铁站","type": 2,"location": {"lat": 39.984055,"lng": 116.316478},"adcode": 110108,"province": "北京市","city": "北京市","district": "海淀区"}],"request_id": "1136352410315519097"
}
字段含义可见下表(可在接口文档中找到):
四、使用案例
由于接口为纯HTTP接口,所以在效果实现上还需要使用项目中的一些组件。本例使用最简的jquery-ui来实现autocomplete效果,下载地址为:http://jqueryui.com/download/。
1. 基础界面
首先构建一个基础界面,创建一个文本框,并依照jquery-ui的用法进行绑定。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!--引入css样式文件--><link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css"/><!--引入所需的jquery库文件--><script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script><!--引入jquery-ui文件--><script src="js/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {$("#search").autocomplete({//为文本框完成绑定source: function(request,response){//使用自定义函数处理}});});</script></head><body><div class="ui-widget"><label for="search">搜索框: </label><input type="text" id="search"></div></body>
</html>
效果如下:
2. 动态响应
在source对应的函数中需要完成接收文本框的值,以及向接口请求数据,最终进行数据封装的过程。需要注意,由于该过程涉及到用户的不断操作,所以建议将ajax设置为同步方式。
$("#search").autocomplete({//为文本框完成绑定source: function(request,response){//从request对象中获得文本框内容var keyword = request.term;//定义数组,封装最终结果var obj = [];$.ajax({url:"https://apis.map.qq.com/ws/place/v1/suggestion",type:"get",dataType:"json",async:false,//关闭异步data:{"key":"替换为自己的key","keyword":keyword,"region":"北京"},success:function(resp){for(i in resp.data){//此处可以根据需要自定义要显示的内容以及封装的数据obj.push({"label":resp.data[i].title + "["+resp.data[i].province+"-"+resp.data[i].city+"-"+resp.data[i].district+"]","value":resp.data[i].title});//label为提示显示的内容//value为选中后补全出现在文本框中的内容}}});//将obj最为结果返回response(obj);}});
测试可知,支持中文与拼音的检索,最终效果如下:
- 拼音搜索
- 选中前
- 选中后
此处功能需要的效果可以根据项目的需要进行调整。
3. 完整案例源码
- 腾讯位置服务案例
五、视频直达
视频地址:https://www.bilibili.com/video/BV1b54y1p7Ny,喜欢的小伙伴儿一定要三连加关注哦~
腾讯位置 - 关键词输入提示
写在结尾:作者力求做到将每个知识点细化,并且对于有关联的知识点都会使用传送门挂载链接。文章采用:“文字 + 配图 + 视频”的方式来进行展现,均是挤时间所作,希望看到这里能留下评论点个赞,略表支持!
扫描下方二维码,加入官方粉丝微信群,可以与我直接交流,还有更多福利哦~
腾讯位置 - 关键词输入提示(结尾附视频)相关推荐
- 腾讯位置 - 逆地址解析(结尾附视频)
写在前面:博主是一只经过实战开发历练后投身培训事业的"小山猪",昵称取自动画片<狮子王>中的"彭彭",总是以乐观.积极的心态对待周边的事物.本人的技 ...
- 腾讯位置 - 地点搜索(结尾附视频)
写在前面:博主是一只经过实战开发历练后投身培训事业的"小山猪",昵称取自动画片<狮子王>中的"彭彭",总是以乐观.积极的心态对待周边的事物.本人的技 ...
- 腾讯地图 - 关键词输入提示(结尾附视频)
一.功能介绍 关键词输入提示接口可以用于获取输入关键字的补完与提示,帮助用户快速输入.可以通过配合前端程序实现Autocomplete(自动完成)的效果. 二.密钥申请 1. 用户登录 打开腾讯位置服 ...
- 腾讯位置 - 地址解析(结尾附视频)
写在前面:博主是一只经过实战开发历练后投身培训事业的"小山猪",昵称取自动画片<狮子王>中的"彭彭",总是以乐观.积极的心态对待周边的事物.本人的技 ...
- 腾讯位置 - 服务端IP定位(结尾附视频)
写在前面:博主是一只经过实战开发历练后投身培训事业的"小山猪",昵称取自动画片<狮子王>中的"彭彭",总是以乐观.积极的心态对待周边的事物.本人的技 ...
- 腾讯位置 - 地图构建入门(结尾附视频)
写在前面:博主是一只经过实战开发历练后投身培训事业的"小山猪",昵称取自动画片<狮子王>中的"彭彭",总是以乐观.积极的心态对待周边的事物.本人的技 ...
- Hadoop全分布式部署 - CentOS(结尾附视频)
写在前面:博主是一只经过实战开发历练后投身培训事业的"小山猪",昵称取自动画片<狮子王>中的"彭彭",总是以乐观.积极的心态对待周边的事物.本人的技 ...
- Apple芯片Mac安装ARM版Win10完美教程(结尾附视频)
写在前面:博主是一只经过实战开发历练后投身培训事业的"小山猪",昵称取自动画片<狮子王>中的"彭彭",总是以乐观.积极的心态对待周边的事物.本人的技 ...
- 使用Mac本打造你的高效率融合双系统(结尾附视频)
写在前面:博主是一只经过实战开发历练后投身培训事业的"小山猪",昵称取自动画片<狮子王>中的"彭彭",总是以乐观.积极的心态对待周边的事物.本人的技 ...
最新文章
- AI领域3种典型的深度学习算法
- Linux实用命令大合集(长期更新)
- 表达式封装和模型驱动封装的区别
- python3 的windows下文件操作注意问题
- 伦敦科学博物馆用百年智慧打造的一套探索书,拓展孩子的科学、数学和艺术思维...
- 一段js实现复制文本内容到剪切板
- 动态代理之: com.sun.proxy.$Proxy0 cannot be cast to 问题
- 获取周一_周一个股精选:光伏概念、央企改革:太阳能(000591)
- 格式化js/html代码的好工具
- mini2440 貌似复杂的mmu
- 转 在SQL Server中创建用户角色及授权(使用SQL语句)
- EM算法——解释 转载
- c语言遗传算法在求解tsp问题,C语言遗传算法在求解TSP问题设计.doc
- SAP GR/IR在系统AP中收货和校验对会计业务的影响(详细)
- centos6使用df命令,设备名称太长导致换行问题
- 微信公众号、微信小程序的详细介绍
- iOS开发:xcode无法选择设备和corner stone如何过滤上传文件
- win10共享打印机 报错 709 57
- 初级C语言之【操作符】
- php中划线,html中下划线、删除线、上划线的样式与用法实例