Google地图无法正常显示

Question

我在Twitter Bootstrap's模态窗口上有一个Google Map小部件。

当我打开模态窗口时，此地图仅显示在窗口小部件的一部分上（example）。

重新调整浏览器窗口大小后，此地图会正确显示。

我尝试使用$('#map').resize()（在带地图的div上），但它不起作用。

对我的问题有任何建议表示赞赏。

Answer 1

我以前解决了这个问题。将地图加载到“display：none”画布时，Google Map将无法正常显示。 Bootstrap模态获胜将在开始时隐藏。因此，您必须确保在Google Map完成加载之前无法隐藏地图画布。

我的工作是将画布移动到一个位置，用户无法看到它并将地图加载到其中。几秒钟后（可能是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);
    });

演示屏幕截图：