0

こんにちは私は3つの異なる入力(都市、通り、通り番号)を持っています。たとえば、私の国は 'Polska'と都市 'Warszawa'なので、この都市からの距離だけを表示する必要があります。どうやってするか?Googleオートコンプリートを別々のフィールドに分割

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

答えて

2

これはかなり簡単です。 Google Place Autocomplete Address Formのサンプルコードを使用している場合は、不要な入力フィールドを削除して、入力するフィールド(street_numberやrouteなど)をそのまま残してください。また不要なプロパティを削除し、street_numberを残して、componentFormオブジェクトからルートする必要があります。このように:

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

オートコンプリートオブジェクトの第2引数(オプション)の 'componentRestrictions'のような追加オプション。あなたは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>

はそれが役に立てば幸い:

はここでライブデモです!

関連する問題