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

 <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 ，但它无法正常工作。

我不明白为什么它在第1页上工作但在第2页没有。我甚至尝试禁用第1页上的脚本来查看是否影响了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

<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密钥。其次，在您的查询中，如果服务器端的页面不刷新，我认为新的输入框应该有第二次初始化。如果您正在使用php页面，它将在第二页上正常运行。如果没有，请初始化另一个id上的第二个文本框，并使用jQuery获取该id以初始化函数。喜欢：

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

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

Answer 2

我刚从你的代码中删除了额外的斜杠，它对我有用..

var input = /** @type {!HTMLInputElement} */(

试试..

Google的自动填充功能在第2页上无效

2 个答案: