Google使用bootstrap模式进行映射,部分加载

Question

地图正常加载正常div.但是在Bootstrap中,模式的一半或部分地图正在显示,但是当我打开控制台时,它可以修复问题并完全显示地图.

照片没有控制台打开

控制台打开的照片

这是我的造型:

<style>
#map_canvas{
    width:100%;
    height: 230px;
    border: 1px solid #333335;
    margin-bottom:20px;
}
</style>

模态的HTML:

<!-- Map Modal -->
<div class="modal fade" id="mapModal" tabindex="-1" role="dialog" aria-labelledby="mapModalLabel" aria-hidden="false">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header" >
                <button type="button" class="close" data-dismiss="modal" aria-hidden="false">&times;</button>
                <h4 class="modal-title" id="mapModalLabel">Map: </h4>
            </div>
            <div class="modal-body" >
                <map id="map_canvas" nid="{{nhd.nid}}"></map>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 1

从文档中

调整大小 - 当div改变大小时,开发人员应该在地图上触发此事件:google.maps.event.trigger(map,'resize').

因为在渲染地图时隐藏了模态,所以google.maps.event.trigger(map, 'resize')在显示模态后必须调用.

打开控制台修复问题的事实是因为它强制容器调整大小,因此调整地图的大小,从而刷新,从而正确呈现.