腾讯地图 - 关键词输入提示（结尾附视频）

头像
腾讯位置服务
    阅读 6 分钟
    头图

    一、功能介绍

    关键词输入提示接口可以用于获取输入关键字的补完与提示，帮助用户快速输入。可以通过配合前端程序实现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...

    地图开发腾讯地图
    本文系转载，阅读原文
    https://sandtower.blog.csdn.net/article/details/113078931
    腾讯位置服务
    1.7k 声望132 粉丝

    立足生态，连接未来

    « 上一篇
    vue 集成腾讯地图基础api Demo集合
    下一篇 »
    五分钟跑通3D地图demo

    引用和评论

    推荐阅读
    头像
    轨迹云全新发布 ：外业车辆、人员、设备轨迹高效管理

    腾讯位置服务阅读 1.1k

    0 条评论
    得票最新