Question

如您所知，每当我们输入谷歌地图时，autoComplete将会触发，我想为此设置一个延迟功能，例如250ms，这样可以给用户更多时间输入并保存信用。我尝试添加$ 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);
}

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

Answer 1

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

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

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

Google将此功能请求标记为已接受。我可以建议主张此功能请求以显示您的兴趣并从Google获取更多更新。

Answer 2

您可以使用超时条件来处理此

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

通过这种方式，你将每隔2500毫秒调用一次，在你之前的代码中它将始终执行，你只是推迟执行，但试试这个。

Answer 3

我正在检查在搜索之前输入的第一个a-z字符...似乎保存了一些元素查找。至少它从一开始就获得了一些相关的返回数据。请注意，这将开始在字母字符后的下一个输入值上显示结果。您可能希望使用空格/空格作为触发器（如此... .value.match（/ \ s /））。此外，您可能希望使用“选项”来指定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();
        ....

Answer 4

如果您使用的是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)"
    >

Answer 5

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

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()
        });
    }
}

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

5 个答案: