Google Autofill API

Question

Postępowałem zgodnie z tym tutorial, aby automatycznie wypełnić miasto na podstawie adresu.

Ale kiedy próbowałem go zaimplementować, nie otrzymuję pożądanej funkcjonalności. Chcę, aby po wypełnieniu adresu pole miasta było automatycznie wypełniane. Poniżej jest mój kod:

<div class="form-group"> 
<label class="col-md-3 control-label" for="example-text-input">City</label> 
<div class="col-md-3"> 
<input type="text" id="crack" name="City" class="form-control" > 
</div> 
</div> 
<div class="form-group"> 
<label class="col-md-3 control-label" for="example-text-input">Area</label> 
<div class="col-md-3"> 
<input type="text" id="ar" name="Area" class="form-control" > 
</div> 
</div> 
<div class="form-group"> 
<label class="col-md-3 control-label" for="example-text- input">Address</label> 
<div class="col-md-3"> 
<input type="text" id="add" name="Address" class="form-control" > 
</div> 
</div> 

Poniżej jest kod javascript

<script> 
     var autocomplete = new google.maps.places.Autocomplete($("#crack")[0], {}); 

     google.maps.event.addListener(autocomplete, 'place_changed', function() { 
      var place = autocomplete.getPlace(); 
      console.log(place.address_components); 
     }); 
    </script> 
    <script> 
      var autocomplete = new google.maps.places.Autocomplete($("#add")[0], {}); 

      google.maps.event.addListener(autocomplete, 'place_changed', function() { 
       var place = autocomplete.getPlace(); 
       console.log(place.address_components); 
      }); 
         var placeSearch, autocomplete; 
var componentForm = { 
    crack: 'long_name', 
}; 

      function fillInAddress() { 
    // Get the place details from the autocomplete object. 
    var place = autocomplete.getPlace(); 

    for (var component in componentForm) { 
    document.getElementById(component).value = ''; 
    document.getElementById(component).disabled = false; 
    } 

    // Get each component of the address from the place details 
    // and fill the corresponding field on the form. 
    for (var i = 0; i < place.address_components.length; i++) { 
    var addressType = place.address_components[i].types[0]; 
    if (componentForm[addressType]) { 
     var val = place.address_components[i][componentForm[addressType]]; 
     document.getElementById(addressType).value = val; 
    } 
    } 
} 
     </script> 

<?php include 'inc/template_end.php'; ?> 
<script type="text/javascript"> 
function hi() 
{ 
    var ele=(document.getElementById("sla").value); 
    if(ele==1) 
    { 
     document.getElementById("g1").style.display="none"; 
    } 
    else 
    { 
     document.getElementById("g1").style.display = "initial"; 
    } 
} 
</script> 

Answer 1

Powodem nie była wypełniania było spowodowane input tag id ów użyłeś: id="crack", id="ar", & id="add". Google używa odpowiednio: id="locality", id="administrative_area_level_1", &

Nie wspominając o tym, że zwracają kilka dodatkowych pól informacji, więc bez tagów input, aby je otrzymać, również otrzymasz od nich błędy.

więc z pewnym odwzorowaniu swojej input tagu id S w funkcji fillInAddress(), a także wprowadzenie w zaczep do innych pól zwracanych, jesteśmy w stanie zrealizować populację dziedzinach, jak miał nadzieję:

<div class="form-group"> 
    <label class="col-md-3 control-label" for="example-text-input">City</label> 
    <div class="col-md-3"> 
     <input type="text" id="crack" name="City" class="form-control"> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-md-3 control-label" for="example-text-input">Area</label> 
    <div class="col-md-3"> 
     <input type="text" id="ar" name="Area" class="form-control"> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-md-3 control-label" for="example-text- input">Address</label> 
    <div class="col-md-3"> 
     <input type="text" id="add" name="Address" onFocus="geolocate()" class="form-control"> 
    </div> 
</div> 

<script> 
    var placeSearch, autocomplete; 
    var componentForm = { 
     street_number: 'short_name', 
     route: 'long_name', 
     locality: 'long_name', 
     administrative_area_level_1: 'short_name', 
     country: 'long_name', 
     postal_code: 'short_name' 
    }; 

    function initialize(){ 
     autocomplete = new google.maps.places.Autocomplete(
      (document.getElementById('add')), 
      { 
       types: ['geocode'] 
      } 
     ); 

     google.maps.event.addListener(autocomplete, 'place_changed', function(){ 
      fillInAddress(); 
     }); 
    } 

    function fillInAddress(){ 
     var place = autocomplete.getPlace(); 

     for (var i = 0; i < place.address_components.length; i++) { 
      var addressType = place.address_components[i].types[0]; 
      if (componentForm[addressType]) { 
       var val = place.address_components[i][componentForm[addressType]]; 
       input = 1; 
       if (addressType === 'street_number') addressType = 'add'; 
       else if (addressType === 'route'){ 
        addressType = 'add'; 
        val = document.getElementById(addressType).value + ' ' + val; 
       } else if (addressType === 'locality') addressType = 'crack'; 
       else if (addressType === 'administrative_area_level_1') addressType = 'ar'; 
       else input = 0; 
       if (input) document.getElementById(addressType).value = val; 
      } 
     } 
    } 

    function geolocate(){ 
     if (navigator.geolocation){ 
      navigator.geolocation.getCurrentPosition(function(position){ 
       var geolocation = new google.maps.LatLng(
        position.coords.latitude, 
        position.coords.longitude 
       ); 
       var circle = new google.maps.Circle({ 
        center: geolocation, 
        radius: position.coords.accuracy 
       }); 
       autocomplete.setBounds(circle.getBounds()); 
      }); 
     } 
    } 

    initialize(); 
</script> 

http://jsfiddle.net/7t1p6oL1/