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

Question

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

我尝试了很多方法来使用 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?
});

帮助？

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

并且显示的.bs.modal 是打开模式后触发的事件

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

Answer 2

你有没有尝试过：

map.updateSize();

Answer 3

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

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

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

Answer 4

在我的模态控制器中，当来自 $modalInstance 的渲染承诺得到解决时，我创建了地图

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

Answer 5

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

}

Answer 6

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

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