無法獲得OpenLayers 3地圖以Bootstrap模式顯示

當試圖在模式中顯示ol3地圖時，看起來有一個奇怪的錯誤。地圖在模式中，但不顯示。手動調整窗口大小會強制顯示。這裏的a link來試試看看我的意思。點擊每個地圖內的設置下拉菜單。點擊「獲取特徵信息」。這將切換帶有地圖的模式（但不顯示）。調整窗口大小。瞧！無法獲得OpenLayers 3地圖以Bootstrap模式顯示

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

幫助？

來源

2014-03-27 Alfonse

你能解決這個問題嗎？ – darkphantum

沒有。還沒。有任何想法嗎？ – Alfonse

請查看http://jsbin.com/hunexepeti/2/edit?html,js,output和http://stackoverflow.com/questions/29904425/openlayers-3-not-showing-on-a-simple-modal ？rq = 1 – Daviddd

確保您設置了打開圖層地圖容器的高度和寬度..

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

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

來源

2014-03-28 13:26:51 ZimSystem

感謝您的迴應。儘管你的演示不會顯示任何地圖。它有同樣的問題。 ;） – Alfonse

我看不到任何地圖 –

你試過：

map.updateSize();

來源

2014-10-23 13:03:22 Tatran

這不提供問題的答案。要批評或要求作者澄清，在他們的帖子下留下評論 - 你總是可以評論你自己的帖子，一旦你有足夠的[聲譽]（http://stackoverflow.com/help/whats-reputation），你會能夠[評論任何帖子]（http://stackoverflow.com/help/privileges/comment）。 –

我遇到了完全相同的問題，稱該方法正在爲我工作。你能詳細說明你是如何得出結論的：它不能解決問題？ – Tatran

如果在調用後某個干擾異步作業完成，這可能不起作用，因此確保在調用其他映射或調整大小任務時調用此操作。 –

我有同樣的問題。您需要強制地圖在模式打開後加載。嘗試具有inits地圖功能：

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

而且shown.bs.modal是一旦模式被打開

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

來源

2015-06-23 14:25:42 DavidEC

在我的模態的控制器創建地圖時trigered事件從$ modalInstance呈現的承諾已解決

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

來源

2015-10-08 13:20:15 Alexander

無法獲得OpenLayers 3地圖以Bootstrap模式顯示

回答

相關問題