传单只呈现到一个角落

Question

我有一个传单地图，只能渲染到一个角落。当我调整浏览器窗口的大小时，整个地图都会呈现。

这就是我调用地图的方式

var map = L.map('map', 
{ crs: L.CRS.EPSG3857 }
).setView([105.2, 100], 6);
var tiles = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    subdomains: 'abcd',
    ext: 'png'
}).addTo(map);

这是我的 css

.myContainer {
    width: 1024px;
    height: 800px;
    position: relative;
}
.map {
    width: 1024px; 
    height: 800px; 
    z-index: 0;
}

map包裹在container中。我在网上找到的关于这个问题的所有内容都指向地图或其父容器中的相对大小。但是，我有绝对尺寸。我在.js(初始化地图的地方(之前加载.css。地图不会显示在起始页上，而是在您单击子菜单点时显示。

为什么地图渲染不正确？

Answer 1

地图不会显示在起始页上，而是在您单击子菜单点时显示。

您正在隐藏或零大小的容器上初始化地图，这使得此问题成为第二个传单地图未正确呈现的副本

答案是一样的：只要地图应该可见，或者当您更改其尺寸或可见性时，请运行map.invalidateSize()。

Answer 2

正如IvanSanchez所说，map.invalidateSize((确实是要走的路。

在 Javascript 中每 2 秒刷新一次地图的一个有用的代码示例是：

//Using setInterval can help the reloading or refreshing of the map itself.
  setInterval(function() {
     map.invalidateSize();
  }, 2000);

。请注意，setInterval(( 以毫秒为单位计算时间，例如, 2000是 2 秒。

map.invalidateSize() 中的map是初始化地图时将地图设置为的变量的名称：

地图初始化示例：

var map = L.map(...