Ortssuche Autocomplete, die integriert mit Bing/Google Geocoding

Question

Haben Sie nette Vorschläge zur automatischen Suche nach Orten, die mit etwas wie Google oder Bings Standortdaten integrieren?

Ich möchte die Position meiner Benutzer auf Anmeldung erfassen, derzeit habe ich eine freie Texteingabebox. Ich möchte eine Art von Autovervollständigung haben, die den Benutzer zur Eingabe von mehr gesäuberten Informationen führt, idealerweise möchte ich den Benutzer auch geocodieren.

Ich verwende derzeit die jQuery autocomplete für die automatische Suche, aber dies erfordert, dass ich die Standortdaten bereitstellen, die ich nicht habe oder beibehalten möchte.

Answer 1

Wenn Sie nicht Ihre eigene Datenbank von Standorten pflegen wollen (gut für Sie!), Dann können Sie sich Freebase und ihr Freebase Suggest Plugin für jQuery anschauen. Sie übernehmen die gesamte Autovervollständigung und sogar die Vorschlags-UI für Sie. Sie können angeben, dass Sie Standorte (oder nur US-Bezirke oder was auch immer) automatisch vervollständigen möchten.

Es gibt Ortsverzeichnisse, die die Datenbank mit Ortsnamen bereitstellen können, aber die Auto-Vervollständigen-Benutzeroberfläche für Sie nicht ausführen. GeoNames, zum Beispiel, hat eine schöne Menge von web services, die Sie mit jQuery Autocomplete zusammenbringen könnten.

Answer 2

Wir tun etwas ähnliches für das „Rechnungsadresse“ Feld auf https://bombsheets.com/ - Sie einen AJAX-Aufruf tun müssen, um die Autovervollständigen-Optionen zu erhalten:

$(".address-autocomplete").autocomplete('/get_address', { 
    delay: 250, 
    scrollHeight: 400, 
    matchSubset: false, 
    cacheLength: 10, 
    minChars: 3 
}); 

Und dann eine Geolocation-API-Server-Seite nutzen, um die tatsächlichen Adressen (wir verwenden Rails ausgezeichnete GeoKit).

Weitere Farben finden Sie unter this question.

Answer 3

https://github.com/lorenzsell/Geocoded-Autocomplete Die jQuery-Plugin benutzt Google Geocoding Javascript API und jQuery UI automatische Vervollständigung.

Answer 4

<script> 
     function init() { 
      var input = document.getElementById('locationTextField'); 
      var autocomplete = new google.maps.places.Autocomplete(input); 

      ///Start for getting lat and lang 

      google.maps.event.addListener(autocomplete, 'place_changed', 
       function() { 
        var place = autocomplete.getPlace(); 
        var lat = place.geometry.location.lat(); 
        var lng = place.geometry.location.lng(); 
        document.getElementById("lat").innerHTML = "Lat: "+lat+"<br />Lng: "+lng; 
       } 
      ); 

      ////End 
     } 

     google.maps.event.addDomListener(window, 'load', init); 
    </script>