0

我无法使用隐藏地图加载我的页面，然后我可以显示点击：toggle_map_button

在我看来，显示/隐藏按钮和地图：

 <%= link_to_remote "Hide Map", :url =>{:action => :toggle_map}, :method => :get, :loading => visual_effect(:toggle_slide, "marketplace_map", :duration => 1, :queue => 'front'), :html => {:id => "toggle_map_button", :class => "toggle_map_button"} %>  

<%= gmaps(:map_options => {:detect_location => true, :center_on_user => true, :zoom => 6, :id => "marketplace_map" }, :markers => { "data" => @json }) %>

在我的 CSS 文件中：

#maketplace_map
{
   width: 100%;
   height: 400px;
   display: none; <= this doesn't get to be set (when I check in HTML code with Bugzilla)
}

在我的 RJS 文件中操作：toggle_map:

page << "document.getElementById('toggle_map_button').innerHTML =(document.getElementById('toggle_map_button').innerHTML == 'Show Map' ? 'Hide Map' : 'Show Map')"

page.flash_msg(:notice_box, flash[:notice]) if flash[:notice]
page.flash_msg(:error_box, flash[:error]) if flash[:error]

flash.discard

从显示地图的页面开始时，整个事情都很完美。切换操作确实设置了 display:none; 正确...

问题出现在从隐藏地图开始并能够单击并向下滑动时。

有任何想法吗？

干杯，

乔尔

4

2 回答 2

3

仔细看看生成的 html，我敢打赌它看起来像：

<div class="map_container"> 
  <div id="marketplace_map" class="gmaps4rails_map"></div>
</div>

所以适当的 CSS 杠杆是map_container类。穿上display:none它。

因为visual_effect似乎需要一个id，两个选项：

  • 覆盖 gmaps4rails 部分

  • 将 gmaps 助手包装在一个 div 中：<div id="foo"> <%= gmaps(bar) %> </div>

我有另一个解决方案给你，刚刚测试过。

你说得对，当隐藏可见时地图很小。

所以为你的助手添加一个选项：<%= gmaps(whatever, :last_map => false)%>

这不会创建地图，只会加载它的对象。

然后添加一些 javascript（我使用 jQuery，但你已经明白了）：

<script>
var createMap = true;
$(function(){
  $("#click_me").click(function(){ 
  if (counter == true)
   {
    Gmaps.loadMaps(); //this will create the map
    counter = false;
   }
  $(".map_container").toggle();  // this hides and shows
  });
});
</script>
于 2011-10-26T06:53:15.647 回答
0

将其解决为@apneadiving 建议

添加选项：

:complete => 'Gmaps.loadMaps();' to visual_effect

在视图中：

<%= link_to_remote "Show Map", 
    :url =>{:action => :toggle_map}, 
    :method => :get, 
    :loading => visual_effect(:toggle_slide, "map", :duration => 1, :queue => 'front'), 
    :complete => 'Gmaps.loadMaps();',
    :html => {:id => "toggle_map_button", :class => "toggle_map_button"} %>  

<div id="map" style="display:none;" >
    <%= gmaps(:map_options => {:detect_location => true, :center_on_user => true, :zoom => 6, :id => "marketplace_map", :last_map => false }, :markers => { "data" => @json }) %>           
</div>
于 2011-10-26T19:29:02.197 回答