use*_*600 1 google-maps ruby-on-rails jquery-autocomplete google-places-api
我正在运行rails 4应用程序,并安装了jquery geocomplete插件的v1.6,以提供谷歌地方自动完成功能.
我按照geocomplete github页面上的说明进行操作(http://ubilabs.github.io/geocomplete/)
该插件在我的本地主机上运行时效果很好,但是当我将我的应用程序上传到heroku时,自动完成简单功能不起作用 - 谷歌地图不会显示,并且在自动填充文本字段中输入不会触发任何响应.此外,页面上没有其他JavaScript工作.
这些是我在视图文件中运行的脚本:
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&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&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>
真的卡在这一个.有没有人有类似的问题？
终于弄明白这个问题出了什么问题.
代码没有任何问题.我需要在上传到Heroku之前预编译资产.
即在命令行:
$ bundle exec rake assets:precompile RAILS_ENV=production
这解决了这个问题.
每当你在Heroku中遇到javascript问题时,我建议你这样做.
| 归档时间： |
|
| 查看次数： |
1540 次 |
| 最近记录： |