Google地圖無法正常顯示

Question

我在Twitter Bootstrap's Modal窗口上有Google Map小部件。

當我打開模式窗口時，此地圖僅顯示在部件的一部分（example）。

當我重新調整瀏覽器窗口大小後，此地圖顯示正確。

我試圖用戶$('#map').resize()（在地圖div上），但它不起作用。

對我的問題任何建議表示讚賞。

Answer 1

我以前解決過這個問題。將地圖加載到「display：none」畫布時，Google Map將無法正確顯示。 Bootstrap模態勝利將在開始時隱藏。所以你必須確保在Google地圖完成加載之前無法隱藏地圖畫布。

我的工作是將畫布移動到用戶無法看到它並將地圖加載到其中的位置。幾秒後（也許是500毫秒），將地圖移動到正確的位置（在你的情況下是模態體）。

我寫一個簡單的例子。你可以試試：

HTML：

<div id="map" style="height:300px;margin-top:-1000px"></div> 
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3 id="myModalLabel">Modal header</h3> 
    </div> 
    <div class="modal-body"> 

    </div> 
    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
     <button class="btn btn-primary">Save changes</button> 
    </div> 
</div> 

的JavaScript：

$(function(){ 
     var mapOptions = { 
      zoom: 8, 
      center: new google.maps.LatLng(-34.397, 150.644), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
     setTimeout(function(){ 
      $('.modal-body').append($("#map").css("margin-top","0px").get(0)); 
     },500); 
    }); 

演示屏幕截圖：