rails 4的geocomplete在Heroku中不起作用答案

【问题标题】：geocomplete for rails 4 not working in Herokurails 4的geocomplete在Heroku中不起作用
【发布时间】：2014-09-10 08:51:36
【问题描述】：

我正在运行一个 rails 4 应用程序并安装了 jquery geocomplete 插件的 v1.6 以提供 google 地方自动完成功能。

我按照 geocomplete github 页面 (http://ubilabs.github.io/geocomplete/) 上的说明进行操作

该插件在我的本地主机上运行时可以完美运行，但是当我将我的应用程序上传到 heroku 时，自动完成简单功能不起作用 - 谷歌地图不显示并且在自动完成文本字段中输入不会触发任何响应。此外，页面上没有其他 javascript 工作。

这些是我在视图文件中运行的脚本：

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script>
  $(function(){
    $("#geocomplete").geocomplete({
      map: ".map_canvas",
      details: "form",
      types: ["geocode", "establishment"],
    });

    $("#find").click(function(){
      $("#geocomplete").trigger("geocode");
    });
  });
</script>

这些是我在 application.js 文件中需要的文件

//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require turbolinks
//= require jquery.turbolinks
//= require jquery.geocomplete
//= require jquery.geocomplete.min
//= require underscore
//= require gmaps/google
//= require_tree .

这是heroku中页面顶部的html：

<!DOCTYPE html>
<html>
  <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link data-turbolinks-track="true" href="/assets/application-2b5264bcc7a1f63268dbbba57c51fade.css" media="all" rel="stylesheet" />
    <script data-turbolinks-track="true" src="/assets/application-1a5a53ee82e1bcf8741700c933ffab84.js"></script>
    <meta content="authenticity_token" name="csrf-param" />

     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
      <script src="/javascripts/html5shiv.js"></script>
      <script src="/javascripts/respond.min.js"></script>
<![endif]-->
    </head>
    <body data-no-turbolink="true">

以及 html 来自谷歌地图/自动完成所在的文档的下方：

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


<style type="text/css" media="screen">
    .map_canvas { 
                  width: 600px; 
                  height: 400px; 
                  margin: 10px 20px 10px 0;
                }
    form { width: 1000px; float: left; }     
</style>

<br />

  <input id="geocomplete" type="text" placeholder="Type business name/address" size="70" />
  <input id="find" type="button" value="Find" />

  <div class="map_canvas"></div>

  <div class="details">

      <div><%= f.label :name %><br />
      <%= f.text_field :name, { :geo => "name", class: "form-control"} %></div>

      ** other fields not shown here **

  </div>

真的卡在这个了。有没有人遇到过类似的问题？

【问题讨论】：

标签： ruby-on-rails google-maps jquery-autocomplete google-places-api

【解决方案1】：

终于弄明白了这个有什么问题。

代码没有问题。我需要在上传到 Heroku 之前预编译资产。

即在命令行：

$ bundle exec rake assets:precompile RAILS_ENV=production

这解决了问题。

每当您在 Heroku 中遇到 javascript 问题时，我建议您这样做。

【讨论】：