javascript - 谷歌地图无法正常显示

Question

我在Twitter Bootstrap's模态窗口上有一个谷歌地图小部件。

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

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

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

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

Answer 1

我以前解决过这个问题。当您将地图加载到“display:none”画布中时，Google 地图将无法正确显示。Bootstrap modal win 一开始会被隐藏。因此，您必须确保在 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);
    });

演示屏幕截图：