谷歌自動完成分割成單獨的字段

Question

嗨，我有3個不同的輸入（城市，街道和街道號碼）。例如我的國家是'Polska'和城市'Warszawa'，所以我需要在這個城市展示唯一的街道。怎麼做？

var input = document.getElementById('inputid'); 

var param = { 
    componentRestrictions: {country: 'PL'}, 
}; 

autocomplete = new google.maps.places.Autocomplete(input, param); 
geocoder = new google.maps.Geocoder(); 

google.maps.event.addListener(autocomplete, 'place_changed', function() { 
    var place = autocomplete.getPlace(); 
    if(place.address_components) { 
     console.log(place.address_components); 
    } 
}); 

Answer 1

這個很簡單。如果您使用Google Place Autocomplete Address Form的示例代碼，則只需刪除不必要的輸入字段，然後保留要填充的字段 - 例如：street_number和路由。您還需要刪除不必要的屬性，只需從componentForm對象中保留street_number和路由。就像這樣：

var componentForm = { 
street_number: 'short_name', 
route: 'long_name' 
}; 

像自動完成對象的第二個參數（選項）「componentRestrictions」的附加選項。它應該是這個樣子：

autocomplete = new google.maps.places.Autocomplete(
    (document.getElementById('autocomplete')), 
    { 
     types: ['geocode'], 
     componentRestrictions : { 
     country: 'PL', 
     } 
    } 
); 

有關組件的詳細信息過濾，您可以檢查this鏈接。

另外請注意這一點：

在這個例子中的具體地址組件的選擇是基於一個典型的地址格式。您可能需要選擇不同的組件以符合不同國家的郵政地址格式。

要了解更多信息，請按照this鏈接。

這裏有一個現場演示：

 var placeSearch, autocomplete; 
 
     var componentForm = { 
 
     street_number: 'short_name', 
 
     route: 'long_name' 
 
     }; 
 

 
     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'], 
 
       componentRestrictions : { 
 
       country: 'PL', 
 
       } 
 
      } 
 
     ); 
 

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

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

 
     // 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()); 
 
      }); 
 
     } 
 
     }

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ&libraries=places&callback=initAutocomplete" 
 
     async defer></script> 
 
      <div id="locationField"> 
 
     <input id="autocomplete" placeholder="Enter your address" 
 
      onFocus="geolocate()" type="text"></input> 
 
    </div> 
 

 
    <table id="address"> 
 
     <tr> 
 
     <td class="label">Street address</td> 
 
     <td class="slimField"><input class="field" id="street_number" 
 
       disabled="true"></input></td> 
 
     <td class="wideField" colspan="2"><input class="field" id="route" 
 
       disabled="true"></input></td> 
 
     </tr> 
 
    </table>

希望它能幫助！