Question

我有一个视图有3个标签，每个标签代表数据视图（表格，地图，图表）。当我单击选项卡时，如果运行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"} %>

当我点击地图标签时，我正在运行：

在HTML地图视图中：

<%= gmaps(:map_options => { :id => "configuration_map", 
          :last_map => false },
          :markers => { "data" => @json, "options" => {"list_container" => "markers_list" }}) %>

在我的RJS（switch_view.js.rjs）中，biomass_configuration是HTML呈现表格，地图或图表的DIV：

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

当我点击选项卡时，它会正确地向上和向下显示表格视图和图表，但它仍然无法用于我的地图。

我想我应该在失明之后和我打电话给Gmaps.loadMaps（）之前延迟一段时间......我试着毫无机会地玩这个延迟。

如果我重新加载页面Ctrl + R，那么盲人上下似乎工作正常。

我也尝试过设置：last_map =＆gt;真的没有成功......

这是应用http://biowattsonline.com

我的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 - 解决此问题的新方法：

我决定加载所有3个视图，只显示选项卡点击上的视图，而不是替换div biomass_configuration。所以其他DIV都设置为display：none。

我更改了标签按钮link_to_remote和我的switch_view.rjs：

MY TAB BUTTONS：

<%= 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

这次地图显示但是在一个角落里。我之前遇到的一个问题，但不知何故修复对那个问题没有用。

20120101 - 添加了Goggle地图API库

在我的布局中：

<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

仍然可以在我的开发环境中使用，但不能在Heroku上部署。

20120103更新

生成HEADER页面

<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>

注意Gmaps.loadMaps尽管：last_option =＆gt; false ...我认为只有在：last_map选项设置为true时才会发生？

Answer 1

我之前遇到过这种情况，它与gmaps4rails无关。

你必须：

手动包含页面中的所有js文件，以便在加载页面时正确加载它们
将正确的选项传递给帮助程序，以便它不会再次尝试包含它
按照您的理解使用Gmaps.loadMaps()。

总而言之，这只是js文件加载的问题。

让我们说清楚：

要包含在html中的文件（我假设您使用谷歌地图）：

<script type="text/javascript" src="//maps.google.com/maps/api/js?v=3.5&sensor=false&amp;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地图javascript。

要确保gmaps4rails文件包含在您的应用中，您可以运行生成器将其复制到您的应用中：rails generate gmaps4rails:install。从那里，您可以删除大部分文件，具体取决于您使用的地图API。

以这种方式改变对助手的召唤：

<%= gmaps(:map_options => { :id => "configuration_map" },
          :markers => { "data" => @json, "options" => {"list_container" => "markers_list"     }},
          :scripts => :none,
          :last_map => false) %>

旁注：

您加载js文件http://maps.gstatic.com两次，但使用不同的选项，您只需执行以下操作：

 <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地图未显示

1 个答案: