2014-06-14 13 views
7

Ich benutze die Google Maps Places Autocomplete API.Google Maps Orte Autocomplete laden Ereignisse

Ich möchte einen Ajax Spinner während der Suche zeigen, bevor die Autocomplete Dropdown angezeigt wird.

Wie kann ich feststellen, ob die Orte Ergebnisse bereit sind? Wird ein Ereignis ausgelöst?

Dies ist besonders hilfreich auf schlechten Internet-Verbindungen, da die Latenz manchmal bis zu 5 Sekunden sein kann. Der Benutzer muss wissen, dass das Suchfeld ein Autocomplete-Eingabefeld ist, bevor er verzweifelt Enter drückt, um zu suchen.

+0

Haben Sie versucht, Ihre eigene Steuerung zu schreiben, anstatt die automatische Vervollständigung, verwenden Sie einfach den Geocoder-Dienst? auf Taste hoch (sagen Sie nach einer Sekunde einen Geocode, zeigen Sie Ihren Spinner, dann auf Geocode komplett ausblenden Sie den Spinner und zeigen Sie eine Liste mit einigen Ergebnisoptionen. –

+0

@loanburger Ich habe es versucht, mit der Autovervollständigung ist es ein bisschen schlanker seit nur 1 http Der Aufruf würde nach Abfrage und ausgewähltem Element erfolgen.Wenn Sie die APIs verwenden, die Google veröffentlicht hat, dauert es mehr als einen einzigen Anruf, um zu replizieren, was die API anbietet (einschließlich der Koordinaten und Informationen über das, was Sie auswählen). Google blockiert auch Ihre Anfragen nicht so viel. – Akshat

+0

Hey, drücken Sie die Eingabetaste, um zu suchen, ist auch eine gültige Operation, wenn Google Maps uns es tun, warum sollten Sie nicht Ihre Benutzer tun? Schauen Sie sich diese Demo, es tut es auch: https: // google -developers.appspot.com/maps/documentation/utils/geocoder/ – miguev

Antwort

2

Sie könnten den Autocomplete-Service verwenden, um die Abfragevorhersagen zu erhalten. Es hat eine Rückruffunktion.

In dem Beispiel aus dem von Ihnen angegebenen Link können Sie als globale Variable im Skript deklarieren. Und der Zugang mit dem den automatischen Vervollständigung Service nach den initialisieren Funktion:

var input; 
function initialize() { 
    ... 
    input = document.getElementById('pac-input'); 
    ... 
} 

function showSpinner() { 
    document.getElementById('spinner').style.display = 'block'; 

    var service = new google.maps.places.AutocompleteService(); 
    service.getQueryPredictions({ input: input }, callback); 
} 

function callback(predictions, status) { 
    if (status != google.maps.places.PlacesServiceStatus.OK) { 
    document.getElementById('spinner').style.display = 'none'; 
    return; 
    } 
} 

Was die Änderungen im HTML-Dokument:

<body> 
    <input id="pac-input" class="controls" type="text" 
     placeholder="Enter a location" onkeypress="showSpinner()"> 
    <img id="spinner" src="spinner.gif" style="position:absolute; top:0; right:0; width: 250px; display: none"> 
    </body> 

Ich würde das nur dann, wenn ein Timeout von einer Sekunde laufen (dh wenn die Internetverbindung des Benutzers langsam ist), ansonsten sieht der Spinner wie ein unterschwelliges Bild aus.

Verwandte Themen