Rails应用程序上的Google地方信息自动完成功能无法正常运行

Question

我在Rails应用程序中有一个表单，在该表单中我使用Google Places API进行自动填充，但是无法使其每次都能正常工作。 每次您将页面加载到表单所在的位置时，就像一卷骰子：有时JS有效，有时却无效。

顺便说一句，我还有其他一些javascript有时也无法使用，但是google autocomplete的那些是最古怪的，它们对任务至关重要。

这是设置：

1°我的html标头包含：

<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= yield :javascript_includes %>

然后在我的体内，我的头部产生了content_for标签

<% content_for :javascript_includes do %>
  <%= javascript_include_tag "application", "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places" %>

  <script type="text/javascript">
     function initializeAutocomplete(){
       var input = document.getElementById('offer_location');
       var options = {
         types: ['(cities)']
       };

       var autocomplete = new google.maps.places.Autocomplete(input, options);

       google.maps.event.addListener(autocomplete, 'place_changed', function() {
         var place = autocomplete.getPlace();
         var lat = place.geometry.location.lat();
         var lng = place.geometry.location.lng();
         $('#offer_latitude').val(lat)
         $('#offer_longitude').val(lng)
       });
     }
     google.maps.event.addDomListener(window, 'load', initializeAutocomplete);
  </script>
<% end %>

我曾经将脚本和initializeAutocomplete放在一个单独的.js文件中，该文件通过资产管道加载，但产生了类似的结果：自动完成仅在一半时间内起作用（实际上，我觉得失败的频率更高）

我认为问题与加载不同元素的时间以及触发回调的时间有关。 以下是我尝试更改的示例：

• 使用$(window).load和$(document).ready而不是addDomListener(window, 'load', initializeAutocomplete)

• 将脚本放入资产管道中加载的单独的google-autocomplete.js文件中（意味着该脚本是在content_for标记中提供的API链接之前加载的

• 将脚本放入资产管道中未包含的单独的google-autocomplete.js文件中，并在content_for标记中的API链接标记之后立即调用

非常感谢你的帮助！

-编辑-

最后，结果证明是turbolinks弄乱了我的jquery触发器，尤其是谷歌自动完成的触发器。 在这里找到了解决所有JS问题的答案。

Answer 1

不知道这是否解决了您的实际错误，但是尝试使用$(function() {initializeAutocomplete()});调用该函数$(function() {initializeAutocomplete()}); -这是$(document).ready(function(){

我会这样设置：

<% content_for :javascript_includes do %>
  <%= javascript_include_tag "application", "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places" %>

  <script type="text/javascript">
     function initializeAutocomplete(){
       var input = document.getElementById('offer_location');
       var options = {
         types: ['(cities)']
       };

       var autocomplete = new google.maps.places.Autocomplete(input, options);

       google.maps.event.addListener(autocomplete, 'place_changed', function() {
         var place = autocomplete.getPlace();
         var lat = place.geometry.location.lat();
         var lng = place.geometry.location.lng();
         $('#offer_latitude').val(lat)
         $('#offer_longitude').val(lng)
       });
     }
     $(function() {
       initializeAutocomplete();
     });
  </script>
<% end %>

因此，您可以定义功能，然后等待dom完成加载。

这并不能解释为什么它有时会起作用，而其他人则不能。 我将通过使用console.log()从函数中注销内容进行调查

Answer 2

这可能是渲染/加载问题。

尝试这个...

<%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=place", async: => true, :defer => true %>

在这里阅读更多...

脚本标签-异步和延迟