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')。

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

Answer 2

在显示的bootstrap事件上调用google map initialize方法

for bootstrap 3

$("#modal_map").on("shown.bs.modal",function(){
        initialize();
    })

Answer 3

在我的情况下触发没有帮助。我使用了js函数setTimeout，在打开我的模态弹出窗口后，它在我的新map-canvas中的init映射

setTimeout(initialize, 500);

Answer 4

在地图初始化功能的底部添加此代码：

var initialize;

initialize = function() {
  ...
  $("#modalWindowId").on("shown.bs.modal", function(e) {
    google.maps.event.trigger(map, "resize");
    return map.setCenter(markerLatLng); // Set here center map coordinates
  });
};

查看this page了解更多信息：

Answer 5

我使用bootstrap模式＆＃39; shown.bs.modal＆＃39;在显示对话框时创建地图的事件。

$('#modalX').on('shown.bs.modal', function () {
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    pos = new google.maps.LatLng(latitude, longitude);

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

5 个答案: