两个通过Google 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">

我有这个谷歌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

这段代码需要做一些修改，所以我将保持它的基础。

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