Question

在尝试在模态中显示ol3地图时，看起来有一个奇怪的错误。地图位于模态中，但不显示。然后手动调整窗口大小会强制显示。这是a link尝试看看我的意思。单击每个地图中的设置下拉菜单。点击“获取功能信息”。这将切换模态中的地图（但不显示）。调整窗口大小。瞧！

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

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

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

并且show.bs.modal是一旦模态被打开就会被触发的事件

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

Answer 2

你试过了吗？

map.updateSize();

Answer 3

确保为“打开图层”地图容器设置高度和宽度。

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

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

Answer 4

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

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

Answer 5

似乎模态和地图的创建几乎同时发生，因此在创建地图时，找不到div元素来创建它。在创建模态后我花了一点时间来解决它

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

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

}

无法获取OpenLayers 3地图以在Bootstrap模式中显示

6 个答案: