web-dev-qa-db-ja.com

Googleマップのオートコンプリートの「place_changed」以外のイベント

現在、place_changedで正しく起動するアプリがあります。

ただし、ユーザーがオートコンプリートエントリを選択した場合と、オートコンプリートを使用せずに自分でテキストを入力した場合とでは、動作が異なるように検索を分岐させたいと思います。

区別するには、どのような種類のイベントリスナーを使用する必要がありますか？ Googleマップオートコンプリートの他のイベントに関するドキュメントは見つかりません。

私が今持っているもの：

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

google.maps.event.addListener(gmaps, 'place_changed', function () {
    //FIRE SEARCH
});
javascriptjquerygoogle-mapsgoogle-maps-api-3autocomplete
38
Wesley

Google Maps Javascript API v3には、 google.maps.places.Autocompleteクラス 、place_changed

標準のHTMLイベントリスナーを追加できます（オートコンプリート機能に影響するかどうかはわかりません）。

10
geocodezip

これは、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>
5
MrUpsidown

独自の入力ハンドラーを追加すると（たとえば、ユーザーが自分のテキストを入力した後に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);
        }
    }
}
2
Glen Ocal

（更新された回答— 10月18日番目 2018 UTC）

_place_changed_ ドキュメント の意味：

ユーザーがコントロールによって提案されていない場所の名前を入力して、Enterキーを押した場合、または場所の詳細リクエストは失敗し、PlaceResultのnameプロパティにユーザー入力が含まれ、他のプロパティはありませんが定義されています。

（コメントで述べたように）プロパティnameが PlaceResultのonlyプロパティであるかどうかを確認できます。Autocomplete.getPlace() で取得したオブジェクト。以下のコードスニペットを見て試してください。

（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>_
1
Sally CJ

これはかなり古い質問ですが、ここで読んだものよりもずっと簡単な解決策を提案します。

「place_changed」イベントは、ユーザーが実際にGoogleのリストから提案を選択したときにのみ発生します。

したがって、ユーザーが提案を選択しなかった限り、入力に入力されたテキストはグーグルの場所の結果ではないと考えることができます。

ここから、「place-changed」を一種の「クリック」イベントと見なすことができます。ブール値を使用して現在の状態を保存します

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;
                    }    
                }  
            }               
        });         
    }
}
0
Matthieu Marcé