谷歌地图自动完成;I don’我只写两页(两种不同的表格）

Google Maps Autocomplete doesn't work on 2 pages (2 different forms)

本文关键字：两页 两种 表格 don 谷歌地图      更新时间：2023-09-26

以下是谷歌自动完成的设置：

    <script type="text/javascript">
      function initialize() {       
        var from1_input = document.getElementById('autocomplete_from1'); // website.com/page1
        var to1_input   = document.getElementById('autocomplete_to1');   // website.com/page1         
        var from2_input = document.getElementById('autocomplete_from2'); // website.com/page2
        var to2_input   = document.getElementById('autocomplete_to2');   // website.com/page2
        var autocomplete_from1_input = new google.maps.places.Autocomplete(from1_input); // website.com/page1 
        var autocomplete_to_1_input  = new google.maps.places.Autocomplete(to1_input);   // website.com/page1
        var autocomplete_from2_input = new google.maps.places.Autocomplete(from2_input); // website.com/page2
        var autocomplete_to2_input   = new google.maps.places.Autocomplete(to2_input);   // website.com/page2            
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

问题是/page1上的表单运行良好，但在/page2中，自动完成功能不起作用。

我已经尝试删除page1的javascript，谷歌自动完成在那里运行得很好，所以这意味着自动完成在page 1age 2上运行，但不幸的是，现在两者都在运行。

ID正确。

为什么？谷歌方面有什么限制吗？还是我忽略了什么？

谢谢大家。

编辑：

<%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places,geometry" %>

包含在标头中。

那么您有一个输入为#autocomplete_from1和#autocomplete_to1的页面，而另一个页面输入为#autocomplete_from2和#autocomplete_to2？

当出现错误时，浏览器会停止脚本执行，当您在第2页时，错误发生在这里：

var autocomplete_from1_input = new google.maps.places.Autocomplete(from1_input);

由于输入不存在，因此将不会执行以下语句。

您必须避免此错误。有不同的可能解决方案，例如try/catch语句

function initialize() {       
   //try to run the code for page1
 try{
    var from1_input = document.getElementById('autocomplete_from1'); 
    var to1_input   = document.getElementById('autocomplete_to1');  
    var autocomplete_from1_input = new google.maps.places.Autocomplete(from1_input); 
    var autocomplete_to_1_input  = new google.maps.places.Autocomplete(to1_input);   
   }
   //in case of an error run code for page2
 catch(e){
    var from2_input = document.getElementById('autocomplete_from2'); 
    var to2_input = document.getElementById('autocomplete_to2');   
    var autocomplete_from2_input = new google.maps.places.Autocomplete(from2_input); 
    var autocomplete_to2_input = new google.maps.places.Autocomplete(to2_input);   
   }
}
相关文章：