javascript - Google 的自动填充功能在第 2 页上不起作用

Question

HTML

 <input id="location_input" type="text" name="location" value="" placeholder="Location" class="0 text-center" style="width:200px;margin:0 auto;" required>

脚本

 <script>
function initMap() {
  var input = /** @type {!HTMLInputElement} */(
      document.getElementById('location_input'));
  var autocomplete = new google.maps.places.Autocomplete(input);
  var infowindow = new google.maps.InfoWindow();
  var geocoder = new google.maps.Geocoder();
  autocomplete.addListener('place_changed', function() {
    infowindow.close();
    var place = autocomplete.getPlace();
    if (!place.geometry) {
      window.alert("Autocomplete's returned place contains no geometry");
      return;
    }
    var address = '';
    if (place.address_components) {
      address = [
        (place.address_components[0] && place.address_components[0].short_name || ''),
        (place.address_components[1] && place.address_components[1].short_name || ''),
        (place.address_components[2] && place.address_components[2].short_name || '')
      ].join(' ');
    }
    infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
  });

  document.getElementById('submit').addEventListener('click', function() {
    geocodeAddress(geocoder);
  });
}

function geocodeAddress(geocoder) {
  var address = document.getElementById('location_input').value;
  geocoder.geocode({'address': address}, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
    //alert('Geocode was successful: ' + results[0].geometry.location);
    //function to call php to submit form.
    } else {
     // alert('Please try a broader location instead' + status);
    }
  });
}
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDmjFZ2NOW5-lGO9U2Wjlzt5-ekLANM8S0&signed_in=true&libraries=places&callback=initMap"
        async defer></script>

我在第 2 页中放置了相同的 html 和脚本，但它没有覆盖此处的自动完成功能。因此，我将 HTML 和脚本上的 id 从 location_input 更改为 location_input2，但它不起作用。

我不明白为什么它在 page1 上工作但在 page2 上不起作用。我什至尝试禁用 page1 上的脚本以查看是否会影响 page2 但没有进行任何更改。我还提到了here https://stackoverflow.com/questions/26317161/google-maps-autocomplete-doesnt-work-on-2-pages-2-different-forms 。但没有任何帮助。

第 2 页

HTML

 <input id="location_input2" type="text" name="location" value="" placeholder="Location" class="0 text-center" style="width:200px;margin:0 auto;" required>

脚本

<script>
function initMap() {
  var input = /** @type {!HTMLInputElement} *///(
  document.getElementById('location_input2'));
  var autocomplete = new google.maps.places.Autocomplete(input);
  var infowindow = new google.maps.InfoWindow();
  var geocoder = new google.maps.Geocoder();
  autocomplete.addListener('place_changed', function() {
    infowindow.close();
    var place = autocomplete.getPlace();
    if (!place.geometry) {
      window.alert("Autocomplete's returned place contains no geometry");
      return;
    }
    var address = '';
    if (place.address_components) {
      address = [
        (place.address_components[0] && place.address_components[0].short_name || ''),
        (place.address_components[1] && place.address_components[1].short_name || ''),
        (place.address_components[2] && place.address_components[2].short_name || '')
      ].join(' ');
    }
    infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
  });

  document.getElementById('submit').addEventListener('click', function() {
    geocodeAddress(geocoder);
  });
}

function geocodeAddress(geocoder) {
  var address = document.getElementById('location_input2').value;
  geocoder.geocode({'address': address}, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
    //alert('Geocode was successful: ' + results[0].geometry.location);
    //function to call php to submit form.
    } else {
      //alert('Please try a broader location instead' + status);
    }
  });
}
    </script>
   <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDmjFZ2NOW5-lGO9U2Wjlzt5-ekLANM8S0&signed_in=true&libraries=places&callback=initMap"
        async defer></script>

Answer 1

首先，最佳实践是不要在论坛中公开共享 API key 。其次，根据您的查询，我认为如果服务器端页面未刷新，新的输入框应该有第二次初始化。如果您正在使用 php 页面，那么它在第二页上效果会很好。如果没有，请在另一个 id 上初始化第二个文本框，并获取该 id 以使用 jQuery 初始化函数。喜欢:

$('.firstTextbox).click(//call init for first);
$('.secondTextbox).click(//call init for second);

希望您现在已经清楚理论部分了。如果您可以分享第二页的代码，我可以为您提供更多帮助。