Question

我无法使用隐藏的地图加载我的页面，然后我可以点击：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;正确......

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

有什么想法吗？

干杯，

乔尔

Answer 1

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

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

所以适当的CSS杠杆是map_container类。把display:none放在上面。

因为visual_effect似乎需要id，所以有两个选项：

覆盖gmaps4rails partial
将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>

Answer 2

将其解决为@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>

显示/隐藏地图，以隐藏地图开头（显示：无）

2 个答案: