События, отличные от "place_changed" для автозаполнения Карт Google

Ответ 1

В Google Maps Javascript API v3 есть только одно зарегистрированное событие для google.maps.places. Класс автозаполнения, place_changed

Вы можете добавить к нему стандартных прослушивателей событий HTML (не уверены, повлияет ли это на функциональность Autocomplete).

Ответ 2

Это сводится к проверке получения объекта place.geometry, как это показано в их официальном примере. Так просто!

function initialize() {

  var ac = new google.maps.places.Autocomplete(
    (document.getElementById('autocomplete')), {
      types: ['geocode']
    });

  ac.addListener('place_changed', function() {

    var place = ac.getPlace();

    if (!place.geometry) {
      // User entered the name of a Place that was not suggested and
      // pressed the Enter key, or the Place Details request failed.
      // Do anything you like with what was entered in the ac field.
      console.log('You entered: ' + place.name);
      return;
    }

    console.log('You selected: ' + place.formatted_address);
  });
}

initialize();

#autocomplete {
  width: 300px;
}

<input id="autocomplete" placeholder="Enter your address" type="text"></input>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>

Ответ 3

Если вы добавите свой собственный обработчик ввода (например, поймав CR после ввода пользователем его собственного текста), автозаполнение и ваша функция могут вызвать ваш метод назад. Мое решение - использовать дроссель, чтобы избежать повторного вызова:

$('#sell_address_input').keyup(function(e){ if(e.keyCode==13){throttle(addressEntered(),1000)}});

....

function throttle(callback, limit) {
    var wait = false;             // Initially, we're not waiting
    return function () {          // We return a throttled function
        if (!wait) 
        {                         // If we're not waiting
          callback.call();        // Execute users function
          wait = true;            // Prevent future invocations
          setTimeout(function () 
          {                       // After a period of time
            wait = false;         // And allow future invocations
          }, limit);
        }
    }
}

Ответ 4

(Обновленный ответ - Октябрь 18 - ^го 2018 UTC)

place_changed документация говорит:

Если пользователь вводит имя места, которое не было предложено элементом управления, и нажимает клавишу Enter, или если запрос сведений о месте не выполняется, PlaceResult содержит пользовательский ввод в свойстве name, без определения других свойств.

Поэтому (как я уже упоминал в своем комментарии) мы можем проверить, является ли name свойства единственным свойством в объекте PlaceResult полученном с помощью Autocomplete.getPlace(). Посмотрите и попробуйте фрагмент кода ниже:

(Если ключ API не работает, используйте свой собственный.)

var gmaps = new google.maps.places.Autocomplete($("#searchproperties").get(0), 
{ types: ['geocode'], componentRestrictions: {country: 'us'} });

google.maps.event.addListener(gmaps, 'place_changed', function () {
  var place = gmaps.getPlace(),
    has_name = ( place && undefined !== place.name ),
    count = 0;

  // Iterates through 'place' and see if it has other props.
  $.each( place || {}, function(){
    if ( count > 1 ) {
      // No need to count all; so let break the iteration.
      return false;
    }
    count++;
  });

  if ( has_name && count < 2 ) {
    $('#test').html( 'You didn\'t make a selection and typed: ' + place.name );
  } else {
    $('#test').html( 'You selected: ' + place.formatted_address );
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBMPpy3betC_QCBJtc3sC4BtEIYo4OYtPU&libraries=places"></script>

<input id="searchproperties" placeholder="Search places">
<div id="test"></div>

Ответ 5

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

Событие place_changed срабатывает только тогда, когда пользователь фактически выбирает предложение из списка Google.

Таким образом, если пользователь не выбрал предложение, вы можете считать, что текст, введенный во входные данные, не является результатом Google Place.

Отсюда вы можете рассматривать "изменение места" как своего рода событие "щелчка", используя логическое значение для сохранения текущего состояния.

function initializeAutocomplete(id) {  
    var element = document.getElementById(id);    
    if (element) {    
        var autocomplete = new google.maps.places.Autocomplete(element, { types: ['geocode','establishment'], componentRestrictions: {country: ['fr']} });
        google.maps.event.addListener(autocomplete, 'place_changed', function(){
            var place = this.getPlace();
            console.log("A result from "+id+" was clicked !");
            for (var i in place.address_components) {    
                var component = place.address_components[i];    
                for (var j in component.types) {  
                    var type_element = document.getElementById(component.types[j]);      
                    if (type_element) {        
                        type_element.value = component.long_name;
                    }    
                }  
            }               
        });         
    }
}