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); 
    }); 

演示屏幕截图：