谷歌地图分割布局

是否有像这样的任何布局 http://layout.jquery-dev.net/samples/gispaho/layoutintab.htm它支持谷歌地图作为竞争我使用上述之一。我遇到了问题，分离器拖动失败了谷歌地图。谷歌地图分割布局

参考 https://stackoverflow.com/questions/15795815/jquery-dragable-fails-over-the-google-map

是我的尝试是

<div id="layout" class="sun-layout" style="height: 600px;"> 
     <div class="ui-layout-west sun-layout"> 

      <div class="map1"> 
      </div> 

     </div> 
     <div class="ui-layout-center sun-layout"> 

      <div class="map2"> 
      </div> 


     </div>

在DOM已准备就绪

变量$布局= $（ “＃布局”）; $ layout.layout（{west__size：400}）;

来源

2013-04-05 BalaKrishnan웃

@Salman我更新了我的文章。 – 2013-04-08 13:57:58

我们在应用程序中遇到了同样的问题。我们只是在调整大小的开始时在地图上显示一个不可见的div，并在最后隐藏它。该div将暂时停止所有鼠标事件到达地图。我想象相同的技术将适用于你的其他问题。只要有一些方法可以挂钩调整大小开始并调整结束事件大小，这应该是有效的。

所以将它应用到你情我愿改变HTML这样：

<div id="layout" class="sun-layout" style="height: 600px;"> 
    <div class="ui-layout-west sun-layout"> 
     <div class="map-mask"></div> <!-- Your map mask --> 
     <div class="map1"> 
     </div>  
    </div> 
    <div class="ui-layout-center sun-layout"> 
     <div class="map-mask"></div> <!-- Your map mask --> 
     <div class="map2"> 
     </div> 
</div>

然后我会添加下列事件的jQuery UI布局：

.layout({ 
    ... 
    onresize_start: function(){ 
     $(".map-mask").show(); 
    }, 
    onresize_end: function(){ 
     $(".map-mask").hide(); 
    }, 
    ... 
})

和一些CSS。我不知道地图大小的上下文是什么，因此您需要对此进行调整。这个想法是让z-index中的div高于地图并完全覆盖它。

.map-mask{ 
    height:100%; 
    width:100%; 
    position: absolute; 
    z-index: 1000; 
}

来源

2013-12-23 20:02:18

谷歌地图分割布局

回答

相关问题