无法在 Bootstrap 模式中显示 OpenLayers 3 地图答案

【问题标题】：Can't get OpenLayers 3 map to display in Bootstrap modal无法在 Bootstrap 模式中显示 OpenLayers 3 地图
【发布时间】：2014-03-27 21:26:25
【问题描述】：

尝试在模态中显示 ol3 地图时似乎出现了一个奇怪的错误。地图处于模态但不显示。但是，手动调整窗口大小会强制它显示。这是a link 尝试了解我的意思。单击每个地图中的设置下拉菜单。单击“获取功能信息”。这将切换带有地图的模式（但不显示）。调整窗口大小。瞧！

我尝试了很多方法来使用 javascript 和 jQuery 来触发 resize 事件：

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

帮助？

【问题讨论】：

你能解决这个问题吗？
没有。还没有。有什么想法吗？
检查这个jsbin.com/hunexepeti/2/edit?html,js,output和stackoverflow.com/questions/29904425/…

标签： javascript jquery twitter-bootstrap-3 openlayers-3

【解决方案1】：

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

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
        })
    });
}

showed.bs.modal 是打开模式后触发的事件

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

【讨论】：

【解决方案2】：

你试过了吗：

map.updateSize();

【讨论】：

这没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方发表评论 - 您可以随时评论自己的帖子，一旦您有足够的reputation，您就可以comment on any post。
我遇到了完全相同的问题，调用该方法对我有用。您能否详细说明您是如何得出结论认为它不能解决问题的？
如果某些干扰异步作业在调用后完成，这可能不起作用，因此请确保在完成其他地图或调整大小任务时调用它。
非常感谢。这解决了这个问题。 ` window.setTimeout(function () { map.updateSize(); }, 200) `

【解决方案3】：

确保为 Open Layers 地图容器设置了高度和宽度。

#map {
    width:100%;
    height:500px;
}

演示：http://www.bootply.com/68637

【讨论】：

感谢您的回复。您的演示虽然不显示任何地图。它有同样的问题。 ;)
我也看不到地图

【解决方案4】：

在我的模态控制器中，当来自 $modalInstance 的渲染承诺被解析时，我会创建地图

$modalInstance.rendered.then(function () {
            createMap();
        });

【讨论】：

【解决方案5】：

似乎模态和地图的创建几乎同时发生，所以当您创建地图时，它找不到 div 元素来创建它。我在创建模态后放了一个小超时来解决它

  setTimeout(() => {
  const map2 = new Map({
    target: 'scanmap',
    layers: [
      new TileLayer({ source: new OSM() })
    ],
    view: new View({
      center: [0, 0],
      zoom: 6
    })
  });
}, 100);

【讨论】：

【解决方案6】：

在 AngularJS 应用程序中，我遇到了同样的问题。

我通过在 $onInit() 上添加一点超时来解决它

constructor(private $log: ILogService, private $window: any, private $timeout: ITimeoutService) {
}

$onInit() {

    // we need a timout here to load map after the modal!
    this.$timeout(() => {
        this.initMyMap();
    });

}

【讨论】：