0

是否有任何类似 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 });

4

1 回答 1

0

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

.map-mask{
     height:100%;
     width:100%;
     position: absolute;
     z-index: 1000;
}
于 2013-12-23T20:02:18.377 回答