使用原型动态加载时，gmaps4rails地图未显示 [英] gmaps4rails map not showing when loaded dynamically using prototype
问题描述
我有一个带有3个选项卡的视图，每个选项卡代表数据视图(表格，地图，图表). 当我单击选项卡时，它会在运行switch_view.js.rjs
I have a view with 3 tabs each representing a view of the data (Table, Map, Charts). When I click on the tab it blinds up the view before if runs switch_view.js.rjs
<%= link_to_remote I18n.t('biomass_configuration_menu.button.view.table'),
:url =>{:controller => :biogas_calculator, :action => :switch_view, :view => "table"},
:method => :get,
:loading => visual_effect(:blind_up, "biomass_configuration", :duration => 0.5, :queue => 'front'),
:html => {:id => "table_view", :class => "toggle_map_button"} %>
<%= link_to_remote I18n.t('biomass_configuration_menu.button.view.map'),
:url =>{:controller => :biogas_calculator, :action => :switch_view, :view => "map"},
:method => :get,
:loading => visual_effect(:blind_up, "biomass_configuration", :duration => 0.5, :queue => 'front'),
:html => {:id => "map_view", :class => "toggle_map_button"} %>
<%= link_to_remote I18n.t('biomass_configuration_menu.button.view.charts'),
:url =>{:controller => :biogas_calculator, :action => :switch_view, :view => "charts"},
:method => :get,
:loading => visual_effect(:blind_up, "biomass_configuration", :duration => 0.5, :queue => 'front'),
:html => {:id => "chart_view", :class => "toggle_map_button"} %>
当我单击地图"选项卡时，我正在运行它:
When I click on the map tab I am running this:
在HTML映射视图中:
In the HTML map view:
<%= gmaps(:map_options => { :id => "configuration_map",
:last_map => false },
:markers => { "data" => @json, "options" => {"list_container" => "markers_list" }}) %>
在我的RJS(switch_view.js.rjs)中，生物质配置是DIV，HTML表示表格，地图或图表:
In my RJS (switch_view.js.rjs), biomass_configuration is the DIV the HTML presenting either a Table, a Map or Charts:
page.replace_html("biomass_configuration", :partial => "biomass_configuration")
page[:biomass_configuration].visual_effect :blind_down, :duration => 1
if session[:view] == "map"
page.delay 3 do
page << "Gmaps.loadMaps();" <=== I thought this would do the trick
end
end
当我单击选项卡时，它可以正确地在表格视图和图表中上下滑动，但是仍然无法在我的地图上使用.
When I click on the tabs, it correctly blinds up and down for the table view and the charts, but it still doesn't work with my map.
我认为我应该在盲注之后和调用Gmaps.loadMaps()之前放置一个延迟时间...我试图在没有任何机会的情况下尝试使用该延迟时间.
I figured I should put a delay after the blind down and before I call Gmaps.loadMaps() ... I tried playing with that delay without any chance.
如果我重新加载页面Ctrl + R，则上下百叶窗似乎可以正常工作.
If I reload the page Ctrl + R then the blind up and down seem to work correct.
我还尝试将:last_map =>设置为true，但没有成功...
I also tried setting :last_map => true with no success ...
在此应用程序 http://biowattsonline.com
我的application.js:
My application.js:
//= require prototype
//= require prototype_ujs
//= require effects
//= require dragdrop
//= require controls
//= require_tree .
//= require gmaps4rails/bing.js
//= require gmaps4rails/googlemaps.js
//= require gmaps4rails/mapquest.js
//= require gmaps4rails/openlayers.js
//= require gmaps4rails/all_apis.js
//= require facebox.js
//= require i18n
//= require i18n/translations
20121229-我为解决此问题所做的新操作:
20121229 - WHAT I DID NEW to resolve the issue:
我决定替换所有div视图，而不是替换div bios_configuration，而是仅在单击选项卡时显示一个视图.因此，其他DIV设置为display:none.
Instead of replacing the div biomass_configuration, I decided to load all 3 views and only show the one on a tab click. So the other DIVs are set with display:none.
我更改了选项卡按钮link_to_remote和switch_view.rjs:
I changed my tab buttons link_to_remote and my switch_view.rjs:
我的标签按钮:
<%= link_to_remote I18n.t('biomass_configuration_menu.button.view.table'),
:url =>{:controller => :biogas_calculator, :action => :switch_view, :view => "table"},
:method => :get,
:loading => visual_effect(:fade, "biomass_configuration_charts", :duration => 1, :queue => 'front') +
visual_effect(:fade, "biomass_configuration_map", :duration => 1, :queue => 'front'),
:html => {:id => "table_view", :class => "toggle_map_button"} %>
<%= link_to_remote I18n.t('biomass_configuration_menu.button.view.map'),
:url =>{:controller => :biogas_calculator, :action => :switch_view, :view => "map"},
:method => :get,
:before => visual_effect(:fade, "biomass_configuration_charts", :duration => 1, :queue => 'front') +
visual_effect(:fade, "biomass_configuration_table", :duration => 1, :queue => 'front'),
:loading => visual_effect(:appear, "biomass_configuration_map", :duration => 1, :queue => 'end'),
:complete => 'Gmaps.loadMaps();' ,
:html => {:id => "map_view", :class => "toggle_map_button"} if logged_in? %>
<%= link_to_remote I18n.t('biomass_configuration_menu.button.view.charts'),
:url =>{:controller => :biogas_calculator, :action => :switch_view, :view => "charts"},
:method => :get,
:loading => visual_effect(:fade, "biomass_configuration_table", :duration => 1, :queue => 'front') +
visual_effect(:fade, "biomass_configuration_map", :duration => 1, :queue => 'front'),
:html => {:id => "chart_view", :class => "toggle_map_button"} %>
和我的RJS:
if session[:view] == "map"
#page[:biomass_configuration_map].visual_effect :appear
end
if session[:view] == "table"
page[:biomass_configuration_table].visual_effect :appear
end
if session[:view] == "charts"
page[:biomass_configuration_charts].visual_effect :appear
end
这一次，地图显示在一个角落.我以前遇到过一个问题，但某种程度上该修复程序无法解决该问题.
This time the map shows but in a corner. A problem I had before, but somehow the fix didn't work on that one.
20120101-添加了Goggle Maps API库
20120101 - Added Goggle maps API library
在我的布局中:
<head>
<%= render "layouts/tags" %>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=I_DID_PUT_MY_KEY_HERE&sensor=true">
</script>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application" %>
<%= render 'layouts/google_analytics' %>
</head>
在application.js中的其他库之前加载Google Maps api
Loading Google maps api before the other libraries in application.js
仍然可以在我的开发环境上工作，但不能一次部署在Heroku上.
Still Works on my development environment but not once deployed on Heroku.
20120103更新
20120103 Updates
已生成HEADER页面
HEADER page generated
<head>
<script type="text/javascript" src="//maps.google.com/maps/api/js?v=3.5&sensor=false&libraries=geometry"/>
<script src="http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/5/16/%7Bmain,geometry%7D.js" type="text/javascript"/>
<script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.5/src/markerclusterer_packed.js"/>
<link href="/assets/application.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="/assets/application.js" type="text/javascript"/>
<style type="text/css" media="screen">
<script type="text/javascript">
<script type="text/javascript" charset="UTF-8" src="http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/5/16/%7Bcommon,util%7D.js"/>
<script type="text/javascript" src="chrome-extension://bfbmjmiodbnnpllbbbfblcplfjjepjdn/js/injected.js"/>
<style type="text/css" media="print">
<script type="text/javascript" charset="UTF-8" src="http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/5/16/%7Bcommon,util%7D.js"/>
</head>
生成了FOOTER
<script type="text/javascript" src="//maps.google.com/maps/api/js?v=3.5&sensor=false&libraries=geometry"/>
<script src="http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/5/16/%7Bmain,geometry%7D.js" type="text/javascript"/>
<script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js"/>
<script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.5/src/markerclusterer_packed.js"/>
<script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/src/richmarker-compiled.js"/>
<script type="text/javascript" charset="utf-8">
Gmaps.configuration_map = new Gmaps4RailsGoogle();
Gmaps.load_configuration_map = function() {
Gmaps.configuration_map.map_options.detect_location = false;
Gmaps.configuration_map.map_options.center_on_user = false;
Gmaps.configuration_map.map_options.zoom = 0;
Gmaps.configuration_map.map_options.id = 'configuration_map';
Gmaps.configuration_map.map_options.last_map = false;
Gmaps.configuration_map.initialize();
Gmaps.configuration_map.markers = [{"description": "<div style='width:200px;'><p>Dec 13,2010 16:32 UTC</p> <h1 style='font-size:14px;' class=selling>SELLING</h1> <h2 style='font-size:12px;'><span style='color:#333;'>Lucerne gras, 2. cut, start flowering</span><sup style='font-size:9px;' class='cancelled state'>cancelled</sup></h2> <p style='font-size:12px;'>2000 tons in Goma, Republique democratique du congo</p> Posted by <b><em>biowatts</em></b> </div>", "sidebar": "<span class='map_sidebar_item'><b>Lucerne gras, 2. cut, start flowering</b><br>2000 t/a</span>", "lng": "29.225241", "lat": "-1.693314"},{"description": "<div style='width:200px;'><p>Sep 17, 2011 23:43 UTC</p> <h1 style='font-size:14px;' class=wanted>WANTED</h1> <h2 style='font-size:12px;'><span style='color:#333;'>feeder cattle liquid manure</span><sup style='font-size:9px;' class='cancelled state'>cancelled</sup></h2> <p style='font-size:12px;'>1000 tons in Rio de janeiro, Brasil</p> Posted by <b><em>biowatts</em></b> </div>", "sidebar": "<span class='map_sidebar_item'><b>feeder cattle liquid manure</b><br>1000 t/a</span>", "lng":"-43.2095869", "lat": "-22.9035393"},{"description": "<div style='width:200px;'><p>Sep 17, 2011 23:43 UTC</p> <h1 style='font-size:14px;' class=wanted>WANTED</h1> <h2 style='font-size:12px;'><span style='color:#333;'>Dummy</span><sup style='font-size:9px;' class='cancelled state'>cancelled</sup></h2> <p style='font-size:12px;'>4000 tons in Sydney, Australia</p> Posted by <b><em>biowatts</em></b> </div>", "sidebar": "<span class='map_sidebar_item'><b>Dummy</b><br>4000 t/a</span>", "lng": "151.2070914", "lat": "-33.8689009"}];
Gmaps.configuration_map.markers_conf.list_container = 'markers_list';
Gmaps.configuration_map.create_markers();
Gmaps.configuration_map.adjustMapToBounds();
Gmaps.configuration_map.callback();
};
window.onload = function() { Gmaps.loadMaps(); }; <=========== when :last_map => false
</script>
尽管:last_option => false，也请注意Gmaps.loadMaps ...我认为只有在:last_map选项设置为true时才会发生?
Note the Gmaps.loadMaps despite :last_option => false ... I thought should happen only when :last_map option set to true ?
推荐答案
我之前遇到过这种情况，它与gmaps4rails无关.
I faced this situation before and it's not related to gmaps4rails.
您必须:
-
手动在页面中包含所有js文件，以便在加载页面时正确加载它们.
include all the js files in the page manually so that they are loaded properly when the page is loaded
将正确的选项传递给助手，以便它不会尝试再次包含它
pass the proper option to the helper so that it doesn't try to include it again
使用您已经了解的Gmaps.loadMaps().
总而言之，这只是js文件加载的问题.
To sum up, it's just a question of js file loading.
让我们澄清一下:
要包含在html中的文件(我假设您使用的是Google地图):
<script type="text/javascript" src="//maps.google.com/maps/api/js?v=3.5&sensor=false&libraries=geometry"></script>
<script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.5/src/markerclusterer_packed.js"></script>
要包含在js清单中的文件:
//= require ./gmaps4rails/googlemaps.js
正如您已经做过的那样，必须在application.js文件之前添加google maps javascript.
As you already did, the google maps javascript must be added before the application.js file.
要确保gmaps4rails文件包含在您的应用程序中，可以运行生成器以将其复制到您的应用程序中:rails generate gmaps4rails:install.根据您使用的地图API，您可以从那里删除许多文件.
To make sure the gmaps4rails files are included in your app, you can run the generator to have them copied in your app: rails generate gmaps4rails:install. From there you can remove much of the files depending on the map API you use.
以这种方式更改对帮助者的呼叫:
Change your call to the helper this way:
<%= gmaps(:map_options => { :id => "configuration_map" },
:markers => { "data" => @json, "options" => {"list_container" => "markers_list" }},
:scripts => :none,
:last_map => false) %>
旁注:
您将js文件http://maps.gstatic.com加载了两次，但是使用不同的选项，您可以执行以下操作:
You load the js file http://maps.gstatic.com twice but with different options, you could simply do:
<script src="http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/5/16/%7Bmain,geometry,common,util%7D.js" type="text/javascript"/>
这篇关于使用原型动态加载时，gmaps4rails地图未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
