GMAP4Rails地图在使用原型动态加载时不显示

我有一个视图，每个选项卡代表数据视图(表格、地图、图表(。当我单击选项卡时，如果运行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 DIV 是呈现表格、地图或图表的 HTML：

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 => true，但没有成功......

在这里，该应用程序 http://biowattsonline.com

我的申请.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 - 我做了什么新来解决问题：

我没有替换div biomass_configuration，而是决定加载所有 3 个视图，只在选项卡单击上显示一个视图。因此，其他DIV设置为显示：无。

我更改了我的选项卡按钮link_to_remote和我的 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

这一次地图显示，但在一个角落里。我以前遇到的一个问题，但不知何故，修复程序不适用于那个问题。

20120101 - 添加了护目镜地图 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>

在应用程序中的其他库之前加载谷歌地图 api.js

仍然适用于我的开发环境，但一次也没有部署在 Heroku 上。

20120103更新

生成的页眉页

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

生成的页脚

<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 => 假 ...我认为只有在：last_map 选项设置为 true 时才会发生？

我以前遇到过这种情况，它与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文件之前添加谷歌地图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"/>

相关内容

最新更新

热门标签：