OpenLayers 3沒有顯示在一個簡單的模式

我試圖顯示使用OpenLayers 3和SimpleModal plugin for jQuery的地圖。當我點擊我的鏈接時，模式會打開，但地圖不顯示。我錯過了什麼？OpenLayers 3沒有顯示在一個簡單的模式

我轉載我的JSBin問題，http://jsbin.com/hunexepeti/2/edit?html,js,output

這是HTML相關部分，

<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的回答。不過，我有幾個位置鏈接，所以我需要在模態中打開不同的位置。

我是否應該重複使用相同的地圖並更改其視圖？
或者我可以創建一個新的視圖，因爲舊的覆蓋？我很好奇表現。

來源

2015-04-27 whitenoisedb

你需要調用initMap動畫完成後，所以在slideDown動畫的回調。

slideDown動畫當然不會顯示任何東西，如果你在完成後初始化地圖。你可以修改onOpen是這樣的：

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

另外，3的OpenLayers可能有一些屬性，你可以設置視圖，使其忽略容器的知名度和尺寸上初始化。

來源

2015-04-27 19:43:11 ekuusela

這樣的傻瓜x）非常感謝。 – whitenoisedb

如果我需要將不同的地圖位置打開爲模式，我是否應該重複使用相同的地圖並更改其視圖？還是應該用新的View創建一個新的？ – whitenoisedb

兩種方式都可以。如果您每次創建一個新地圖，請務必在舊地圖上調用'map.setTarget（null）'來釋放資源。 – tsauerwein

我得到了解決方案創建自己的模態。的HTML：

<a href="#openModal"> 
<div id="openModal" class="modalDialog"> 
       <div> 
        <a href="#close" title="Close" class="close">X</a> 
        <div id="map" class="map" data-role="map"></div> 
       </div> 
      </div>

的CSS： .modalDialog { 位置是：固定; font-family：Arial，Helvetica，sans-serif; top：0; right：0; bottom：0; left：0; background：rgba（0,0,0,0.8）; z-index：99999; 不透明度：0; -webkit-transition：opacity 400ms ease-in; -moz-transition：opacity 400ms ease-in; 過渡：不透明400ms緩和; pointer-events：none; } .modalDialog：target {0} {0} {0}}不透明度：1; pointer-events：auto; }

.modalDialog > div { 
    width: 90%; 
    position: relative; 
    margin: 3% auto; 
    background: #fff; 
} 
.close { 
    background: #606061; 
    color: #FFFFFF; 
    line-height: 25px; 
    position: absolute; 
    right: -12px; 
    text-align: center; 
    top: -10px; 
    width: 24px; 
    text-decoration: none; 
    font-weight: bold; 
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px; 
    border-radius: 12px; 
    z-index: 9999; 
} 
.close:hover { background: #00d9ff; }

初始化openlayer：

function initialize(url) { document.getElementById('map') //etc //byId }

，那麼你必須設置高度爲你的模式地圖：

function fixContentHeight(){ 
    var viewHeight = $(window).height(); 
    var maps = $("div[data-role='map']:visible:visible"); 

    var contentHeight = viewHeight; 
    maps.height(contentHeight); 
} 
fixContentHeight();

希望它可以幫助...

來源

2016-07-18 21:10:03 Gema

OpenLayers 3沒有顯示在一個簡單的模式

回答

相關問題