Rysowanie mapy OpenLayers 3 w ukrytym elemencie

Question

Piszę stronę, na której można zobaczyć oba szczegóły dotyczące obszaru i mapy. Szczegóły znajdują się na jednej karcie, a mapa na innej. Odpowiednia część kodu HTML znajduje się poniżej, a klasy pochodzą z Bootstrap.

<div class="col-xs-8"> 
    <ul class="nav nav-tabs"> 
     <li class="active"><a href="#tab-details" data-toggle="tab">Details</a></li> 
     <li><a href="#tab-map" data-toggle="tab">Map</a></li> 
    </ul> 
    <div class="tab-content"> 
     <div id="tab-details" class="tab-pane fade in active"></div> 
     <div id="tab-map" class="tab-pane fade"> 
      <div id="map-container" class="map"></div> 
     </div> 
    </div> 
</div> 

Warstwa kafli pochodzi z OSM, a warstwa wektorowa jest ładowana za pośrednictwem adresu URL obsługującego plik KML. Czyni to za pomocą OpenLayers 3.0.0 następująco:

function ShowMap() { 
    var area = $('#AreaCode').val(); 
    $('#map-container').empty(); 
    if (area != null && area != '') { 
     var kmlUrl = '/kml?code=' + area; 
     var tile = new ol.layer.Tile({ source: new ol.source.OSM() }); 
     var vectorSource = new ol.source.KML({ url: kmlUrl, projection: 'EPSG:3857' }); 
     var vector = new ol.layer.Vector({ source: vectorSource }); 
     vector.setOpacity(.3); 
     var map = new ol.Map({ 
      target: 'map-container', 
      layers: [tile, vector], 
      view: new ol.View({ 
       center: [0, 0], 
       zoom: 2 
      }) 
     }); 

     vector.addEventListener("change", function(event) { 
      map.getView().fitExtent(vectorSource.getExtent(), map.getSize()); 
     }); 
    } 
} 

$('#tab-map-link').on('shown.bs.tab', function(event) { 
    ShowMap(); 
}); 

Czyni mapę kiedy karta mapa kliknięciu powodując małe opóźnienie. Czy istnieje sposób jej załadowania, nawet jeśli karta nie jest wybrana? Jeśli spróbuję tego i nie przerysuję po wybraniu karty mapy, wówczas płótno pozostanie puste, gdy przełączyłem się na kartę mapy i pokazane są tylko przyciski powiększania i pomniejszania.

Czy istnieje sposób renderowania mapy w elemencie, który nie jest widoczny?

Answer 1

można zainicjować mapę w ukrytym pojemniku, a następnie, gdy karta jest aktywna, można zadzwonić updateSize na mapie:

map.updateSize()