Question

是否有这样的布局 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准备好了

var $ layout = $（“＃layout”）; $ layout.layout（{ west__size：400}）;

Answer 1

我们的申请中遇到了同样的问题。我们只是在调整大小开始时在地图上显示一个不可见的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。我不知道map的大小是什么上下文，所以你需要定制它。我们的想法是让z-index中的div高于地图并完全覆盖它。

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

谷歌地图拆分器布局

1 个答案: