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中。我在网上找到的有关此问题的所有内容都指向地图中的相对尺寸或其父容器。但是，我有绝对的尺寸。我在.css（我初始化地图的地方）之前加载了.js。地图不会显示在起始页上，而是显示在单击子点时。

为什么地图没有正确呈现？

Answer 1

地图不会显示在首页上，但是当您点击子点时。

您正在隐藏或零大小的容器上初始化地图，这使得此问题与2nd leaflet map not rendering correctly

重复

答案是相同的：每当地图变得可见时，或者当您更改其尺寸或可见度时，请运行map.invalidateSize()。

传单只渲染到一个角落

1 个答案: