Как отложить функцию автозаполнения Google, чтобы сэкономить кредит

Как вы знаете, каждый раз, когда мы печатаем, срабатывает автозаполнение карты Google, я хочу установить для этого функцию задержки, например 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);
}

каждый раз, когда я пытаюсь ввести поисковый запрос, сразу же появляется список результатов поиска, можно ли отложить его? чтобы пользователь мог ввести больше символов?


google-maps google-maps-api-3 angularjs angularjs-directive
person linyuanxie    schedule 06.12.2016    source источник

Ответы (5)


arrow_upward
2
arrow_downward

В настоящее время вы не можете контролировать частоту запросов прогнозирования мест для элемента автозаполнения через Maps JavaScript API.

Тем не менее, в общедоступном трекере проблем есть запрос функции:

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

Google пометил этот запрос функции как принятый. Я могу предложить пометить этот запрос функции звездочкой, чтобы показать ваш интерес и получать дальнейшие обновления от Google.

person xomena    schedule 06.12.2016

arrow_upward
0
arrow_downward

Вы можете сделать условие с тайм-аутом, чтобы справиться с этим

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

таким образом вы будете вызывать каждые 2500 мс, в вашем предыдущем коде он всегда будет выполняться, вы просто откладываете выполнение, но попробуйте это.

person ocespedes    schedule 06.12.2016
comment
Спасибо за ответ, но я хочу это сделать, чтобы сэкономить деньги. каждый раз, когда мы печатаем, он автоматически отправляет запрос, я не видел большой разницы между вашим кодом и моим кодом. Я хочу установить временную задержку после того, как пользователь начнет печатать, чтобы у пользователя было больше времени для ввода большего количества символов и сохранения кредитов googleMaps. - person linyuanxie; 06.12.2016
comment
Я не очень хорошо понимаю, мой код делает запрос каждые 2500 мс, которые я привел в качестве примера, если пользователь вводит между этими 2500 мс, не будет делать другой запрос, только когда 2500 мс прошли. Итак, вы делаете небольшую задержку между запросами, вы пробовали или тестировали это? Также я сделал обновление кода - person ocespedes; 06.12.2016

arrow_upward
0
arrow_downward

Я проверяю ввод первого символа az перед поиском... кажется, он сохраняет некоторый поиск элементов. По крайней мере, он получает некоторые соответствующие возвращаемые данные с самого начала. Обратите внимание, что это начнет отображать результаты для следующего входного значения после альфа-символа. Вместо этого вы можете использовать пробел/пробел в качестве триггера (например,... .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();
        ....
person CoderHaas    schedule 13.03.2017

arrow_upward
0
arrow_downward

Если вы используете 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)"
    >
person Sasha Yaroshenko    schedule 17.12.2018

arrow_upward
0
arrow_downward

Это решение, которое я сделал, надеюсь, это поможет:

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()
        });
    }
}
person Andoitz Jordán    schedule 21.07.2020