在 Google 地图 API Rails APP 之后加载 Javascript
Loading Javascript After Google Maps API Rails APP
昨天在另一个问题中,在另一个用户的帮助下,我可以设法使用 Geocoder 和 Gmaps4rails gem。它工作得很好,但在我在页面上添加脚本后,其他 Javascript 不再工作。
因此,如果我刷新页面效果很好,Fotorama 和 Gmaps 可以正常工作,但是,当我被另一个 link 重定向到应用程序时,Fotoroma 不会加载,实际上只有 Gmaps 可以工作。在整个应用程序发生这种情况后,其他 JS 停止工作。
GMap 所在的视图:
<script src="//maps.google.com/maps/api/js?key=XXXXXX"></script>
</script>
<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
<script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js' type='text/javascript'></script>
<div class="fotorama col-sm-6"
data-width="700"
data-ratio="3/2"
data-nav="thumbs"
data-thumbheight="48"
data-allowfullscreen="true">
<% @property.images.each do |imagem| %>
<%= link_to imagem.url do %>
<%= image_tag(imagem.url) %>
<% end if @property.images? %>
<% end %>
</div>
<h3>Description of the property:</h3>
<%= @property.description %>
<h3>Property in the map:</h3>
<div class="col-sm-10">
<div style='width: 800px;'>
<div id="map" style='width: 800px; height: 400px;'></div>
</div>
</div>
在底部的 JS 脚本:
<script type="text/javascript">
$(document).on('turbolinks:load', function(){
$('.fotorama').fotorama({})
})
</script>
<script type="text/javascript">
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
markers = handler.addMarkers(<%=raw @hash.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
</script>
应用JS:
//= require bootstrap
//= require underscore
//= require gmaps/google
//= require turbolinks
//= require fotorama
//= require_tree .
应用布局
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
我已经尝试更改包含标签:
<%= javascript_include_tag 'application', 'data-turbolinks-track' => 'reload' %>
不解决问题。如果我从视图中删除了 JS 输入脚本,地图将无法工作,但 JS 问题会停止。
我尝试在输入 gmaps 时这样做:
<script src="//maps.google.com/maps/api/js?key=XXXXXX" data-turbolinks-eval=false></script>
不起作用。
当问题发生时,控制台显示:
有人遇到过这个问题或知道如何解决吗?
我可以设法解决这个问题。我不认为这是解决方案,但如果有人遇到同样的问题,也许可以提供帮助。
首先需要更正脚本源的link。改变
<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
用于:
<script src="https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script>
我是根据 stevenm 的评论找到的:
https://github.com/apneadiving/Google-Maps-for-Rails/issues/166
并且也把Scritps的位置改到
的头部
app/views/layout/application.html.erb
应该是这样的:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<script></script>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => 'reload' %>
<script type='text/javascript' src="//maps.google.com/maps/api/js?key=AIzaSyB52XBCs9iJ2UTTHkWCePRkEci7Hlrn1-k"></script>
<script src="https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script>
<script type='text/javascript' src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js'></script>
<%= csrf_meta_tags %>
在此之后,至少对我来说,效果很好。
昨天在另一个问题中,在另一个用户的帮助下,我可以设法使用 Geocoder 和 Gmaps4rails gem。它工作得很好,但在我在页面上添加脚本后,其他 Javascript 不再工作。
因此,如果我刷新页面效果很好,Fotorama 和 Gmaps 可以正常工作,但是,当我被另一个 link 重定向到应用程序时,Fotoroma 不会加载,实际上只有 Gmaps 可以工作。在整个应用程序发生这种情况后,其他 JS 停止工作。
GMap 所在的视图:
<script src="//maps.google.com/maps/api/js?key=XXXXXX"></script>
</script>
<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
<script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js' type='text/javascript'></script>
<div class="fotorama col-sm-6"
data-width="700"
data-ratio="3/2"
data-nav="thumbs"
data-thumbheight="48"
data-allowfullscreen="true">
<% @property.images.each do |imagem| %>
<%= link_to imagem.url do %>
<%= image_tag(imagem.url) %>
<% end if @property.images? %>
<% end %>
</div>
<h3>Description of the property:</h3>
<%= @property.description %>
<h3>Property in the map:</h3>
<div class="col-sm-10">
<div style='width: 800px;'>
<div id="map" style='width: 800px; height: 400px;'></div>
</div>
</div>
在底部的 JS 脚本:
<script type="text/javascript">
$(document).on('turbolinks:load', function(){
$('.fotorama').fotorama({})
})
</script>
<script type="text/javascript">
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
markers = handler.addMarkers(<%=raw @hash.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
</script>
应用JS:
//= require bootstrap
//= require underscore
//= require gmaps/google
//= require turbolinks
//= require fotorama
//= require_tree .
应用布局
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
我已经尝试更改包含标签:
<%= javascript_include_tag 'application', 'data-turbolinks-track' => 'reload' %>
不解决问题。如果我从视图中删除了 JS 输入脚本,地图将无法工作,但 JS 问题会停止。
我尝试在输入 gmaps 时这样做:
<script src="//maps.google.com/maps/api/js?key=XXXXXX" data-turbolinks-eval=false></script>
不起作用。
当问题发生时,控制台显示:
有人遇到过这个问题或知道如何解决吗?
我可以设法解决这个问题。我不认为这是解决方案,但如果有人遇到同样的问题,也许可以提供帮助。
首先需要更正脚本源的link。改变
<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
用于:
<script src="https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script>
我是根据 stevenm 的评论找到的:
https://github.com/apneadiving/Google-Maps-for-Rails/issues/166
并且也把Scritps的位置改到
的头部app/views/layout/application.html.erb
应该是这样的:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<script></script>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => 'reload' %>
<script type='text/javascript' src="//maps.google.com/maps/api/js?key=AIzaSyB52XBCs9iJ2UTTHkWCePRkEci7Hlrn1-k"></script>
<script src="https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script>
<script type='text/javascript' src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js'></script>
<%= csrf_meta_tags %>
在此之后,至少对我来说,效果很好。