我有一张传单 map ,它只呈现在一个 Angular 落里。当我调整浏览器窗口大小时,整个 map 都会呈现。
这就是我调用 map 的方式
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> — Map data © <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
包裹在容器
中。我在网上找到的关于此问题的所有内容都指向 map 或其父容器中的相对 大小。但是,我有绝对尺寸。我在 .js
(我初始化 map 的地方)之前加载了 .css
。 map 不会显示在起始页上,而是在您单击子菜单点时显示。
为什么 map 没有正确呈现?
最佳答案
The map will be displayed not on the startpage, but when you click on a submenue point.
您正在一个隐藏的或零大小的容器上初始化 map ,这使得这个问题与2nd leaflet map not rendering correctly 重复。
答案是一样的:只要 map 应该可见,或者当您更改其尺寸或可见性时,运行 map.invalidateSize()
。
关于javascript - 传单只呈现在一个 Angular 落,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42204194/