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 - это 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

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 - ЧТО Я НОВЫЙ, чтобы решить проблему:

Вместо того, чтобы заменить div biomass_configuration, я решил загрузить все 3 вида и показывать только один на вкладке. Таким образом, другие DIV установлены с дисплеем: нет.

Я изменил свои кнопки вкладки link_to_remote и мой switch_view.rjs:

МОИ КНОПКИ TAB:

<%= 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 карт Goggle

В моем макете:

<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 карт Google перед другими библиотеками в application.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>

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 => false ... Я думал, что это должно произойти, только если для параметра: last_map установлено значение true?

apneadiving · Answer 1 · 21 декабря 2011

Я сталкивался с такой ситуацией раньше, и она не связана с gmaps4rails.

. Вы должны:

включить все js-файлы на странице вручную, чтобыони загружаются правильно при загрузке страницы
передают соответствующий параметр помощнику, чтобы он не пытался включить его снова
используйте Gmaps.loadMaps() как вы уже поняли.

Подводя итог, это всего лишь вопрос загрузки файла js.

Давайте проясним ситуацию:

Файлы для включения в html (я предполагаю, что вы используете карты Google):

<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

Как вы уже сделали, javascript карт Google должен быть добавлен перед файлом application.js.

Чтобы убедиться, что файлы 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) %>

Sidenote:

Вы загружаете файл 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 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Карта gmaps4rails не отображается при динамической загрузке с использованием прототипа

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы