Question

我正在运行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>

真的陷入了这一个。有没有人有类似的问题？

Answer 1

最后想出了这个问题。

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

即。在命令行：

$ bundle exec rake assets:precompile RAILS_ENV=production

这解决了这个问题。

我建议您在Heroku中遇到javascript问题时执行此操作。

rails 4的geocomplete不能在Heroku中工作

1 个答案: