一、性能介绍

关键词输出提醒接口能够用于获取输出关键字的补完与提醒，帮忙用户疾速输出。能够通过配合前端程序实现Autocomplete（主动实现）的成果。

二、密钥申请

1. 用户登录

关上腾讯位置服务主页：https://lbs.qq.com，点击右上角的登录按钮：

2. 验证信息

点击控制台，进入开发者信息界面，补全根本用户信息，实现验证。

3. 申请密钥

点击左侧key与配额下的key治理：
点击创立新密钥，填写Key名称、形容、验证码，期待审核通过：
密钥申请通过后，能够点击设置按钮批改名称及形容，并能够抉择启用的产品，以及对调用规定进行限度：
同时，能够在查看配额界面查看各接口的用量状况：

三、操作步骤

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，喜爱的小伙伴儿肯定要三连加关注哦~

https://www.bilibili.com/vide...