Google自動填充API

Question

我跟着這個tutorial自動填充城市的地址。

但是，當我試圖實現它，我沒有得到我想要的功能。我希望在填寫地址後，自動填寫城市字段。下面是我的代碼：

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

下面是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

它不是填充的原因是由於input標籤id是你使用：id="crack"，id="ar"，& id="add"。 Google分別使用id="locality",id="administrative_area_level_1",& id="route"。

更何況他們會返回幾個更多的信息領域，所以如果沒有input標籤來接收他們，您也會從中收到錯誤。

所以你input標籤id S IN的fillInAddress()功能，以及將在其它任何返回的字段的catch的一些映射，我們能夠完成場羣作爲你所希望的：

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