Openlayer Map -仅在页面刷新后显示

Question

即将推出一个新的爱好网站。除了地图之外，所有工作都很好!当包含地图的页面首次加载时，地图通常不显示，而只是显示一个空白区域，然后是一些白色行/窄条。如果我刷新页面，它工作正常。什么好主意吗?

谢谢!

<div style="text-align:center">
<div id="search_map" class="map img-responsive" style="height: 30rem;width:100%;max-width:500px;text-align:center;margin: 0 auto;"></div>
<div id="popupmap" class="ol-popup" style="background-color: white;box-shadow: 0 1px 4px rgba(0,0,0,0.2);
border-width: 10px;padding: 8px;border-radius: 10px;border: 1px solid #cccccc;font-size: 8px;text-align:center" >
<div id="popup-contentmap"></div>
</div>  
</div>

<script type="text/javascript">
var map = new ol.Map({
target: 'search_map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([<%= @record.long %>,<%= @record.lat %>]),
zoom: 15
})
});


{
var container1 = document.getElementById('popupmap');
var content1 = document.getElementById('popup-contentmap');

var overlay1 = new ol.Overlay({
element: container1
});

map.addOverlay(overlay1);
content1.innerHTML = '<p class="normaltext" style="padding:0px;margin:0px;font-size:8px;"><%= image_tag("photo.jpg", :size => "20x20", :crop => :fill, :style => "") %>&nbsp;&nbsp;<a href="link" class="normaltextlink"><%= @record.eateryname %>' + '</a></p>';
overlay1.setPosition(ol.proj.fromLonLat([<%= @record.long %>,<%= @record.lat %>]));
}

var layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([<%= @record.long %>,<%= @record.lat %>]))
})
]
})
});
map.addLayer(layer);

map.updateSize();
</script>

Answer 1

您可以尝试将map初始化代码包装在一个函数中，并在DOM加载完成后调用该函数。

window.onload = function() {
var map = new ol.Map({
target: 'search_map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([<%= @record.long %>,<%= @record.lat %>]),
zoom: 15
})
});
};