Google 자동 완성을 별도의 입력란으로 분할

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 및 route) 만 남기면됩니다. 불필요한 속성을 제거하고 street_number를 남겨두고 componentForm 객체에서 라우트해야합니다. 이 같은 : 자동 완성 객체의 두 번째 인수 (옵션)에서 'componentRestrictions'와 같은

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

추가 옵션. 당신이 this 링크를 확인하실 수 있습니다 필터링 구성 요소에 대한 자세한 내용은

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

: 그것은 다음과 같이 보일 것이다.

이 유의하시기 바랍니다 :

이 예에서는 특정 주소 구성 요소의 선택은 전형적인 주소 형식을 기반으로합니다. 다른 국가의 우편 주소 형식에 맞추기 위해 다른 구성 요소를 선택해야 할 수도 있습니다. 자세한 내용을 보려면하려면

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

는 희망이 도움이 :

여기에 라이브 데모입니다!