如何延迟谷歌自动完成功能以节省信用

Posted 2023-02-23

【中文标题】如何延迟谷歌自动完成功能以节省信用

【英文标题】：How to delay the google autoComplete function to save credit

【发布时间】：2017-04-21 11:11:18

【问题描述】：

正如你所知，每次我们输入谷歌地图时，自动完成都会触发，我想为此设置一个延迟功能，例如 250 毫秒，这样给用户更多的输入时间并节省积分。我尝试添加 $timeout，但看起来它对我不起作用。请你帮我看看这个好吗？提前谢谢。 html:

<input name="google_places_ac" type="text" class="google_places_ac input-block-level" ng-model="address" placeholder="Please enter a location" ng-blur="updateMap()"/>

指令：

 link: function($scope, elm, attrs)   

                    $timeout(function()

                    var autocomplete = new google.maps.places.Autocomplete($(elm).find(".google_places_ac")[0], );  
                    google.maps.event.addListener(autocomplete, 'place_changed', function() 
                             var place = autocomplete.getPlace();
                            $scope.address = place.formatted_address;
                            $scope.location = 
                                formatted_address: place.formatted_address,
                                loglat: place.geometry.location
                            ;
                            $scope.$apply();
                            //pop up the event and index(if needed)
                            $scope.$emit('updatemap',$scope.indexposition);
                        );
                    ,1000);

每次我尝试输入搜索输入时，它都会立即弹出搜索结果列表，有什么办法可以延迟吗？所以用户可以输入更多的字符？

【参考方案1】：

这是我所做的解决方案，希望对您有所帮助：

let lastCall = Date.now()

function initMap()
    var options = 
        types: ['address'],
        componentRestrictions: country: "es"
    ;

    var input = $('#pac-input')[0];
    if(input)
        var autocomplete = new google.maps.places.Autocomplete(input, options);
        google.maps.event.addListener(autocomplete, 'place_changed', function() 
            let coords = autocomplete.getPlace().geometry.location
            register([coords.lat(),coords.lng()])
        );
        $('#pac-input').keypress(function(event)
            let miliseconds = (Date.now() - lastCall)
            if(miliseconds <= 3000)
                event.preventDefault()
                $('#pac-input').val($('#pac-input').val()+event.key)
                setTimeout(function()
                    google.maps.event.trigger($('#pac-input')[0],'focus',);
                    lastCall = Date.now()
                , 2999);
            
            lastCall = Date.now()
        );
    

【参考方案2】：

如果你使用 Angularjs，你可以试试这个：

ng-model-options=" debounce: 200 "

其中 200 - 以毫秒为单位的延迟

我的自动完成字段代码如下：

<input g-places-autocomplete 
           force-selection="true"
           enter="home.doSearch()"
           type="text"
           class="form-control"
           id="searchAddress"
           ng-model="home.searchAddress"
           name="searchAddress"
           options="home.autocompleteOptions"
           ng-model-options=" debounce: 1500 "
           autocomplete="off"
           placeholder=" 'YOUR_ROADTRIP_BEGINS' | translate "
           ng-keyup="home.checkForEnterButton($event)"
    >

【参考方案3】：

我在搜索之前检查要输入的第一个 a-z 字符...似乎节省了一些元素查找。至少它从一开始就得到了一些相关的返回数据。请注意，这将在字母字符之后的下一个输入值上开始显示结果。您可能希望使用空格/空白作为触发器（例如... .value.match(/\s/)）。 此外，您可能希望使用 Options 来指定 ComponentRestrictions 或 Bounds。这是文档的链接。 https://developers.google.com/maps/documentation/javascript/places-autocomplete

$scope.getDestinationLocation = function () 
    if (document.getElementById("daddress1").value.match(/[a-z]/i)) 
        var options = 
            types: ['address'],
            componentRestrictions:  country: "us" 
        ;
        var autocomplete = new google.maps.places.Autocomplete(
           (document.getElementById("daddress1")),
             options);
        autocomplete.addListener('place_changed', $.proxy(function () 
            var place = autocomplete.getPlace();
        ....

【参考方案4】：

目前您无法通过 Maps JavaScript API 控制 Autocomplete 元素的地点预测请求的频率。

但是，公共问题跟踪器中有一个功能请求：

https://code.google.com/p/gmaps-api-issues/issues/detail?id=5831

Google 将此功能请求标记为已接受。我可以建议在此功能请求上加注星标，以表达您的兴趣并从 Google 获得进一步的更新。

【参考方案5】：

你可以做一个带有超时的条件来处理这个

if(!$scope.isDelayed)
  $scope.isDelayed = true;
  $timeout(function()
     //call google maps api
     $scope.isDelayed = false;
  , 2500)

这样你将每 2500 毫秒调用一次，在你之前的代码中它总是会被执行，你只是在延迟执行，但是试试这个。

【讨论】：

感谢您的回复，但我想这样做的原因是为了省钱。每次我们输入时，它都会自动发送请求，我没有看到你的代码和我的代码有什么区别。我想在用户开始输入后设置一个时间延迟，以便用户有更多时间输入更多字符并节省 googleMaps 积分。

我不是很了解，我的代码每 2500 毫秒发出一次请求，我举个例子，如果用户在这 2500 毫秒之间输入，则只有在 2500 毫秒过去后才会发出另一个请求.所以你在请求之间做了一点延迟，你试过还是测试过？我还更新了代码