Google Otomatik Doldurma API'si

Question

Şehiryi adres bazında otomatik olarak doldurmak için bu tutorial numaralı telefonu takip ettim.

Ancak, uygulamayı denediğimde, istediğim işlevi almıyorum. Adresi doldurduktan sonra şehir alanının otomatik olarak doldurulmasını istiyorum. Aşağıda

<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> 

o doldurma değildi sebebi kullanılan input etiket id s kaynaklandığını javascript kodu

<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

edilir: id="crack", id="ar", & id="add" Aşağıda benim kodudur. Google, sırasıyla id="locality", id="administrative_area_level_1", & id="route"'u kullanır.

Bazı daha fazla bilgi alanına sahip olduklarından bahsetmediklerinden, input etiketlerinin bunları alması için, bunlardan da hatalar alırsınız. Eğer umduğu gibi

sizin inputfillInAddress() işlevinde id ler etiketi, hem de başka herhangi bir iade alanlar için bir catch koyarak bazı haritalama ile Demek ki alanların nüfusu başarmak edebiliyoruz:

<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/