Rails 应用程序上的 Google Places 自动完成功能无法可靠运行

Question

我的 Rails 应用程序中有一个表单，我在其中使用 Google Places API 进行自动完成，但我无法让它每次都正常工作。每次加载表单所在的页面时，就像掷骰子一样：有时 JS 有效，有时无效。

顺便说一句，我有几个其他的 javascripts 有时也无法工作，但用于谷歌自动完成的那些是最古怪的，它们是关键任务。

设置如下：

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 文件中，该文件是通过 Asset Pipeline 加载的，但结果相似：自动完成功能只工作了一半...（实际上我什至觉得它失败了更频繁）

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

• 使用$(window).load 和$(document).ready 代替addDomListener(window, 'load', initializeAutocomplete)

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

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

非常感谢您的帮助！

-- 编辑--

最后结果证明是 turbolinks 搞乱了我的 jquery 触发器，尤其是用于 google 自动完成的触发器。找到了答案there，我用它修复了我所有的 JS。

Answer 1

不确定这是否解决了您的实际错误，但请尝试使用$(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 %>

在这里阅读更多...

Script Tag - async & defer