通過谷歌API的兩個自動完成字段

Question

我有id="Pickup Location"和id="Drop Location"這兩個字段。我想自動填寫印度城市名稱的字段。

<input type="text" value="" name="form[Pickup Location]" id="Pickup Location" onfocus="geolocate()" class="rsform-input-box"> 

<input type="text" value="" name="form[Drop Location]" id="Drop Location" onfocus="geolocate()" class="rsform-input-box"> 

而且我有這個自動完成的Google API代碼，它完美地工作。但是，JS是爲輸入字段編寫的，僅與id="autocomplete"配合使用。

那麼現在，我該如何重寫JS，以便接受Pick Location和Drop Location？

PS：我不需要id=autocomplete字段，將會丟棄它。

<input id="autocomplete" onFocus="geolocate()" type="text"> 

<script> 
     // This example displays an address form, using the autocomplete feature 
     // of the Google Places API to help users fill in the information. 

     // This example requires the Places library. Include the libraries=places 
     // parameter when you first load the API. For example: 
     // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"> 

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

     // 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> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyADbpfJGWwRh5um_gd2gNySgrI5FAy2RZk&libraries=places&callback=initAutocomplete" async defer></script> 

Answer 1

該代碼需要進行很多更改，而SO不是代碼編寫服務，所以我會保持基本。

fillInAddress()函數需要html元素來存儲兩個位置的值。由於這些元素不存在，我已刪除該代碼。

geolocate()函數看起來只能用於在地圖上繪圖，而不會出現在您的代碼中，因此我將其刪除。

因此，以下僅適用於自動填充。你仍然需要弄清楚如何通過谷歌地圖API返回印度的城市。

var placeSearch, pickupLocation, dropLocation; 
 

 
function initAutocomplete() { 
 
    // Create the autocomplete object, restricting the search to geographical 
 
    // location types. 
 
    pickupLocation = new google.maps.places.Autocomplete(
 
    /** @type {!HTMLInputElement} */ 
 
    (document.getElementById('Pickup_Location')), { 
 
     types: ['geocode'] 
 
    }); 
 

 
    dropLocation = new google.maps.places.Autocomplete(
 
    /** @type {!HTMLInputElement} */ 
 
    (document.getElementById('Drop_Location')), { 
 
     types: ['geocode'] 
 
    }); 
 
}

<input type="text" value="" name="form[Pickup Location]" id="Pickup_Location" placeholder="Pickup Location" class="rsform-input-box"> 
 

 
<input type="text" value="" name="form[Drop Location]" id="Drop_Location" placeholder="Drop Location" class="rsform-input-box"> 
 

 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyADbpfJGWwRh5um_gd2gNySgrI5FAy2RZk&libraries=places&callback=initAutocomplete" async defer></script>

Answer 2

下面的代碼應爲您按照您的要求工作！請確保你寫的填表程序工作正常

function initAutocomplete() { 
 
    var myFirstEle = document.getElementById('firstEle'), 
 
    mySecondEle = document.getElementById('secondEle'); 
 
    generateAutoComplete(myFirstEle); 
 
    generateAutoComplete(mySecondEle); 
 

 
} 
 

 
function generateAutoComplete(ele) { 
 
    // Create the autocomplete object, restricting the search to geographical 
 
    // location types. 
 
    var autocomplete = new google.maps.places.Autocomplete(
 
    /** @type {!HTMLInputElement} */ 
 
    ele, { 
 
     types: ['geocode'] 
 
    }); 
 

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

 
} 
 

 
function fillInAddress(autocomplete) { 
 
    // 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; 
 
     } 
 
    } 
 
    }