javascript - 无法在 Bootstrap 模式中显示 OpenLayers 3 map

Question

尝试在模式中显示 ol3 map 时，似乎存在一个奇怪的错误。 map 处于模态但不显示。然而，手动调整窗口大小会强制它显示。这是 a link试着看看我的意思。单击每个 map 中的设置下拉菜单。单击“获取功能信息”。这将使用其中的 map 切换模态(但不显示)。调整窗口大小。瞧!

我尝试了很多方法来使用 javascript 和 jQuery 来触发调整大小事件:

$('#featinfo').on('shown.bs.modal', function () {
ol.Map.event.trigger(map5, "resize"); //borrowed from google.maps.event. How to do this in ol3?
});

帮忙吗？

Answer 1

我遇到了同样的问题。您需要在模式打开后强制加载 map 。 尝试使用初始化 map 的函数:

function loadMap () {
    var map = new ol.Map({
        controls: ol.control.defaults({
            attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                collapsible: false
            })
        }).extend([mousePositionControl]),
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        target: 'map',
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        })
    });
}

shown.bs.modal 是模态框打开后触发的事件

<script>
    $('#GazModal').on('shown.bs.modal', function () {
        loadMap();
     })
</script>