it-swarm.com.de

Andere Ereignisse als "place_changed" für die automatische Vervollständigung von Google Maps

Ich habe eine App, die derzeit korrekt auf place_changed ausgelöst wird.

Ich möchte jedoch verzweigen, um sich anders zu verhalten, wenn ein Benutzer einen Autocomplete-Eintrag ausgewählt hat und wenn er selbst Text ohne die Hilfe von Autocomplete eingegeben hat.

Welche Art von Ereignis-Listener sollte ich verwenden, um die Unterscheidung zu treffen? Ich kann keine Dokumentation zu anderen Ereignissen für Google Maps Autocomplete finden.

was ich jetzt habe:

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
});
36
Wesley

Es gibt nur ein dokumentiertes Ereignis in der Google Maps Javascript API v3 für die Klasse google.maps.places.Autocomplete , place_changed.

Sie können standardmäßige HTML-Ereignis-Listener hinzufügen (nicht sicher, ob dies die Autocomplete-Funktion beeinflusst).

10
geocodezip

Es kommt darauf an zu prüfen, ob Sie ein place.geometry-Objekt erhalten, wie in ihrem offiziellen Beispiel gezeigt. So einfach ist das!

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>

4
MrUpsidown

Wenn Sie einen eigenen Eingabehandler hinzufügen (z. B. CR abfangen, nachdem der Benutzer seinen eigenen Text eingegeben hat), können Sie die Methode autocomplete und Ihre Funktion möglicherweise rückwärts aufrufen. Meine Lösung ist, Gas zu verwenden, um den wiederholten Anruf zu vermeiden:

$('#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

Dies ist eine ziemlich alte Frage, aber ich schlage eine Lösung vor, die viel einfacher sein könnte als das, was ich hier lese.

Das "place_changed" -Ereignis wird nur ausgelöst, wenn ein Nutzer tatsächlich einen Vorschlag aus der Google-Liste auswählt.

Solange der Nutzer keinen Vorschlag ausgewählt hat, können Sie davon ausgehen, dass der in die Eingabe eingegebene Text kein Google-Platzierungsergebnis ist.

Von hier aus können Sie "Ort geändert" als eine Art "Klick" -Ereignis betrachten und einen Booleschen Wert verwenden, um den aktuellen Status zu speichern

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é

(Aktualisierte Antwort - 18. Oktoberth 2018 UTC)

Der place_changedDokumentation sagt:

Wenn der Benutzer den Namen eines Bereichs eingibt, der nicht vom Steuerelement vorgeschlagen wurde, und die Eingabetaste drückt oder wenn eine Place Details - Anforderung Wenn dies fehlschlägt, enthält das PlaceResult die Benutzereingabe in name Eigenschaft, mit keine anderen Eigenschaften definiert.

Also (wie ich in meinem Kommentar erwähnt habe), können wir überprüfen, ob die Eigenschaft name die Eigenschaft only im PlaceResult -Objekt ist, das über Autocomplete.getPlace() abgerufen wird. Sehen Sie sich das Code-Snippet an und probieren Sie es aus:

(Wenn der API-Schlüssel nicht funktioniert, verwenden Sie Ihr eigenes .)

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>

0
Sally CJ