我有一张只渲染到一个角落的传单地图。当我调整浏览器窗口大小时,整个地图都会呈现。
这就是我调用地图的方式
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;
}
The map
被包裹在一个container
。我在网上找到的关于这个问题的所有内容都指向relative地图或其父容器中的大小。然而,我有绝对的尺寸。我加载.css
之前.js
(我初始化地图的地方)。地图不会显示在起始页上,而是当您单击子菜单点时显示。
为什么地图渲染不正确?
地图不会显示在起始页上,而是当您单击子菜单点时显示。
您正在隐藏或零大小的容器上初始化地图,这使得这个问题重复第二张传单地图渲染不正确 https://stackoverflow.com/questions/33740130/2nd-leaflet-map-not-rendering-correctly/33740373
答案是一样的:运行map.invalidateSize()
每当地图应该变得可见时,或者当您更改其尺寸或可见性时。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)