高德地图js api换成webservice之 input 输入提示

应甲方需求，做了一个城市公交出行的导航功能，但是由于js api中输入提示的调用次数额度非常少，只有100次/天，本着能省则省的原则，和后端商量着改成了用webservice，5000次/天的额度，会缓解一部分之前由于调用限制导致的不可用的问题。

由于之前一直用的是js api这一类封装的非常完善代码量较少的工具，换成webservice还是有点懵的，下面就我前端对于更改的内容做如下记录，也希望能够帮助到有需要的朋友们。

一、根据官网的步骤要求完成如下三步

第一步，申请”Web服务API接口”密钥（Key）；

第二步，拼接HTTP请求URL，第一步申请的Key需作为必填参数一同发送；

第三步，接收HTTP请求返回的数据（JSON或XML格式），解析数据。

这里就不多加赘述了，大家直接看官网的指引就行

输入提示-API文档-开发指南-Web服务 API | 高德地图API

二、明确需要的字段，和后端沟通

像我这里，做的是导航，我实际需求只需要有地点的经纬度就可以了，但是为了用户使用，还需要地点的名称，因此，我需要的内容就是：“经纬度”，“名称”。我们可以在官方文档中看到，提供的字段信息是非常多的，我们只需要用其中一部分。

三、写前端js代码

首先我们输入的实现是一旦input框中有字键入就要开始调用服务开始搜索，那么我这里就用了一个oninput来判断，将我们要监听的input框元素定义成一个参数，一旦这个事件发生了就要触发这个输入提示的方法。

let spyon = document.getElementById('#keyword')

spyon.oninput = function (){

        输入提示的方法();

}

-------------------------------------------------------------------------------------------------------------------------------

下面我们来写输入提示的方法

// webservice的输入提示

function getMention (){

        var startpos = $('#keyword1').val()

        if (startpos !== ""){

                $(".keymention").show()

                $.ajax({

                        url: "https://szgj.2500.tv/api/v1/search/tips/"+startpos,

                        type: "get",

                        success: function (data) {

                                console.log("这是获取提示的结果",data)

                                if (data.data.count){

                                        console.log("有内容")

                                        console.log(data.data)

                                        //这里用的是jsrender的方式渲染出提示框，uu们可自行换成自己的方式

                                        var mentioncon = $.templates("#mentionline").render(data.data.tips)

                                        console.log(mentioncon)

                                        //因为每次获取到数据都会添加到提示框中，因此每次都要先清空再填充

                                        $(".key1mention").empty()

                                        $(".key1mention").append(mentioncon)

                                }

                        },

                        error: function () {

                                console.log("获取提示失败")

                        }

                })

        }

        else{

                $(".key1mention").hide()

        }

}

到这里基本就完成了，但是这是会出现一个问题：我们每输入一个字母就会调用一遍接口，删除同理，那么一个用户如果仅是搜索从“苏州站”到“昆山站”就会调用21次，即使5000次也扛不住这么调用。

解决思路：我们合理考虑输入速度，在输入后设置settimeout延迟调用方法或者延迟执行ajax，每当输入框在输入的时候，就使用abort()方法将上一个ajax请求终止掉。

形象得说就是，例如我在输入“suzhou”的时候，刚输入s，两秒之后再调用s的收入提示服务，但是我肯定能在两秒之内输入u这个字母，那么在输入u，也就是发生了oninput行为的时候，将上一个s的输入提示的请求终止掉，这样应该就能减少调用的次数。

各位大佬有何高见还请指教一二，若有错误还请各位指正，欢迎留言探讨垂询。