OpenLayers 3不在简单的模态上显示 [英] OpenLayers 3 not showing on a simple modal

问题描述

我正在尝试使用OpenLayers 3和用于jQuery的SimpleModal插件显示地图. .当我单击链接时，将打开模式对话框，但未显示地图.我想念什么?

I'm trying to display a map using OpenLayers 3 and the SimpleModal plugin for jQuery. When I click my link, the modal opens but the map isn't showing. What am I missing?

我已经在JSBin上重现了我的问题， http://jsbin.com /hunexepeti/2/edit?html，js，输出

I've reproduced my problem on JSBin, http://jsbin.com/hunexepeti/2/edit?html,js,output

这是与HTML相关的部分，

This is the HTML relevant part,

<a id="open-map" href="#">Open map</a>
<div id="map"></div>

这是我的JS

function initMap(lat, lon) {
    var container = document.getElementById('map');
    var map = new ol.Map({ 
      layers: [ 
        new ol.layer.Tile({ 
          source: new ol.source.Stamen({
            layer: 'toner'
          })
        })
      ], 
      renderer: 'canvas',
      target: container, 
      view: new ol.View({ 
        center: [lat, lon], 
        zoom: 2 
      }) 
    }); 
  }

$(document).on('click', 'a#open-map', function(e) {
  e.preventDefault();

  var pos = {
    lat: 0,
    lon: 0
  };

  $("#map").modal({ 
    onOpen: function (dialog) {
      dialog.overlay.fadeIn('fast', function () {
        dialog.data.hide();
        dialog.container.fadeIn('fast', function () {
          dialog.data.slideDown('fast');     
        });
      });
      initMap(pos.lat, pos.lon);
    },
    onClose: function (dialog) {
      dialog.data.fadeOut('fast', function () {
        dialog.container.hide('fast', function () {
          dialog.overlay.slideUp('fast', function () {
            $.modal.close();
          });
        });
      });
    },
    overlayClose: true
  });
});

由于@ekuusela的答复，它是固定的.但是，我有几个位置链接，因此需要在模式中打开不同的位置.

It is fixed, thanks to @ekuusela answer. However I have several location links, so I need to open different locations into the modal.

• 我应该重用相同的地图并更改其视图吗?
• 还是我可以创建一个带有新视图的新视图，因为旧的视图会被覆盖?我对性能感到好奇.

推荐答案

动画制作完成后，您需要调用initMap，因此在slideDown动画的回调中.

You need to call initMap after the animations are finished, so in the slideDown animation's callback.

如果在完成地图后初始化地图，slideDown动画当然不会显示任何内容.您可以将onOpen修改为如下形式:

The slideDown animation of course won't show anything if you init the map after it's been completed. You could modify the onOpen to be something like this:

onOpen: function (dialog) {
  dialog.overlay.fadeIn('fast', function () {
    dialog.data.hide();
    dialog.container.fadeIn('fast', function () {
      dialog.data.show(); // show just so we can init the map properly
      initMap(pos.lat, pos.lon);
      dialog.data.hide().slideDown('fast');  
    });
  });

或者，OpenLayers 3可能具有一些属性，您可以将其设置为视图，以使其在初始化时忽略容器的可见性和尺寸.

Alternatively, OpenLayers 3 might have some properties you can set to the view to make it ignore container visibility and dimensions on initialize.

这篇关于OpenLayers 3不在简单的模态上显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！