适用于Google Map 自动填充的'place_changed'以外的事件

4 回答

• 10

  Google Maps Javascript API v3中只有一个记录的事件google.maps.places.Autocomplete class， place_changed

  您可以向其添加标准HTML事件侦听器（不确定这是否会影响自动完成功能） .

  回复于 2024-05-16T00:32:16+08:00
• 5

  这归结为检查是否收到 place.geometry 对象，如their official example中所示 . 就如此容易！

  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>
  

  回复于 2024-05-16T00:32:16+08:00
• 2

  如果你添加自己的输入处理程序（例如在用户输入自己的文本后捕获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);
          }
      }
  }
  

  回复于 2024-05-16T00:32:16+08:00
• 1

  （更新的答案 - 2018年10月18日UTC）

  place_changed documentation说：

  如果用户输入控件未建议的Place的名称并按Enter键，或者Place Details请求失败，则PlaceResult将在name属性中包含用户输入，而不定义其他属性 .

  所以（正如我在评论中提到的），我们可以检查属性 name 是否是通过Autocomplete.getPlace()检索到的PlaceResult对象中的唯一属性 . 请参阅并尝试以下代码段：

  （如果API密钥不起作用，请使用your own . ）

  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's 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>
  

  回复于 2024-05-16T00:32:16+08:00