谷歌地圖分割佈局

是否有像這樣的任何佈局 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

谷歌地圖分割佈局

回答

相關問題