小编Far*_*lam的帖子

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

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

照片没有控制台打开

控制台打开的照片

这是我的造型:

<style>
#map_canvas{
    width:100%;
    height: 230px;
    border: 1px solid #333335;
    margin-bottom:20px;
}
</style>
Run Code Online (Sandbox Code Playgroud)

模态的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 -->
Run Code Online (Sandbox Code Playgroud)

html css google-maps twitter-bootstrap

5
推荐指数
1
解决办法
7018
查看次数

标签 统计

css ×1

google-maps ×1

html ×1

twitter-bootstrap ×1