Django. Google Place Autocomplete Adresse Formular

Ich habe ein Formular in einer Vorlage, wo der Benutzer Adresse eingeben kann. Ich möchte die "Autocomplete-Adresse platzieren" mithilfe der Google API anwenden.Django. Google Place Autocomplete Adresse Formular

Aus irgendeinem Grund funktioniert Autocomplete-Funktion nicht mit Formular. Jeder Rat wird gutgeschrieben. Vielen Dank.

Forms.py

where_load = forms.CharField(max_length=100, widget=forms.TextInput(attrs={'id':"autocomplete"})) 
where_unload = forms.CharField(max_length=100, widget=forms.TextInput(attrs={'id':"autocomplete"}))

HTML-Templates

<head> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={API_KEY}&libraries=places&callback=initAutocomplete" async defer></script> </haed> 

<body> 
.... 
<div class="col-sm-37"> 
    {{form.where_load|as_crispy_field}} 
</div> 
<div class="col-sm-37"> 
    {{form.where_unload|as_crispy_field}} 
</div> 
<script> 
    // This example displays an address form, using the autocomplete feature 
    // of the Google Places API to help users fill in the information. 
    var placeSearch, autocomplete; 

    function initAutocomplete() { 
     // Create the autocomplete object, restricting the search to geographical 
     // location types. 
     autocomplete = new google.maps.places.Autocomplete(
      /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')), 
      {types: ['geocode']}); 

     // When the user selects an address from the dropdown, populate the address 
     // fields in the form. 
     autocomplete.addListener('place_changed', fillInAddress); 
    } 

    // [START region_geolocation] 
    // Bias the autocomplete object to the user's geographical location, 
    // as supplied by the browser's 'navigator.geolocation' object. 
    function geolocate() { 
     if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position) { 
      var geolocation = { 
      lat: position.coords.latitude, 
      lng: position.coords.longitude 
      }; 
      var circle = new google.maps.Circle({ 
      center: geolocation, 
      radius: position.coords.accuracy 
      }); 
      autocomplete.setBounds(circle.getBounds()); 
     }); 
     } 
    } 
    // [END region_geolocation] 
</script> 
</body>

Quelle

2016-08-18 smchae

Sie möchten Ihren API-Schlüssel verstecken, nein? –

In Ihrem Rückruf finden Sie das Element der automatischen Vervollständigungen, anwenden möchten, und die zur automatischen Vervollständigung dort zu erklären. Vielleicht möchtest du auch deinen API-Schlüssel in die Vorlage laden, wie ich es unten getan habe

<script> 
    var onLoaded = function() { 
     // I am assuming your field has id of where_load, it might be different 
     var location_input = document.getElementById('where_load'); 
     var autocomplete = new google.maps.places.Autocomplete(location_input); 

    } 
</script> 
<script src="https://maps.googleapis.com/maps/api/js?key={{api_key}}&libraries=places&callback=onLoaded" async defer></script>

Quelle

2016-08-24 14:12:18 theShobster

Django. Google Place Autocomplete Adresse Formular

Antwort

Verwandte Themen