地圖不佔用整個div

我正在使用地理編碼顯示帶顯示用戶位置的Google地圖。我正在尋找滑動菜單的地圖。我遇到的問題是，當您打開滑動菜單時，地圖只佔用左上角的一個小區域，但只要調整瀏覽器窗口的大小，地圖就會像我想要的那樣佔據整個區域。無論您調整瀏覽器窗口的大小，即使縮小瀏覽器窗口的大小，也會發生這種情況。讓我知道如果你需要看到更多的我的代碼比這地圖不佔用整個div

滑動菜單功能

$(document).ready(function() 
    { 
    $(".content").hide(); //updated line, removing the #panel ID. 
    $('#tab').toggle(function() //adding a toggle function to the #tab 
     { 
     $('#panel').stop().animate(
     { 
      width:"800px", opacity:0.8 //to adjust width of bar 
     } 
     , 500, function() //sliding the #panel to 200px 
     { 
      $('.content').fadeIn('slow'); //slides the content into view. 
     }); 
     }, 
    function() //when the #tab is next cliked 
    { 
     $('.content').fadeOut('slow', function() //fade out the content 
     { 
     $('#panel').stop().animate(
      { 
      width:"0", opacity:0.1 //slide the #panel back to a width of 0 
      } 
      , 500); 
     }); 
    }); 
    });

滑動菜單HTML

<div id="panel"> 
    <div class="content"> 
    <div id="mapContainer"></div> 
    </div> 
</div>

CSS

#tab { 
    width: 30px; 
    height: 100px; 
    position: fixed; 
    left: 0px; 
    top: 100px; 
    display: block; 
    cursor: pointer; 
    background-color: #ff0000; 
    border-top-right-radius: 20px; 
    border-bottom-right-radius: 20px; 
} 

#panel { 
    position: fixed; 
    left: 0px; 
    top: 50px; 
    background-color: #ffffff; 
    height: 500px; 
    width: 0px; 
    border-top-right-radius: 20px; 
    border-bottom-right-radius: 20px; 
} 

#mapContainer { 
    height: 500px; 
    width: 800px; 
    border:10px solid #eaeaea; 
}

來源

2012-01-09 Colin747

你的問題的工作示例將是非常有用的，如果你能提供一個。也許把一個在http://jsfiddle.net/？ – ANeves 2012-01-09 10:38:31

你能舉個例子，讓我們看看問題出在哪裏 – 2012-01-09 10:38:56

舉一個例子，一旦標籤被打開，你重新調整屏幕尺寸，它應該佔用整個div的大小，除非刷新頁面，否則無法再次重新創建問題。讓我知道這個例子是否適用。 – Colin747 2012-01-09 11:22:38

地圖容器需要寬度和高度才能正確顯示地圖，但似乎動畫會干擾這些值。

由於正確設置了寬度和高度並引發了resize事件，所以在瀏覽器調整大小時，該地圖可以正常工作。

最快捷的解決問題的方法是調用調整大小的方法，當動畫完成像這樣：

google.maps.event.trigger(map, 'resize');

的jsfiddle更新：http://jsfiddle.net/uADHv/2/

來源

2012-01-09 22:30:25

謝謝，非常感謝 – Colin747 2012-01-10 10:52:04

地圖不佔用整個div

回答

相關問題