传单只渲染到一个角落 [英] leaflet only renders into one corner

问题描述

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

I have a leafletmap that only renders into one corner. When I resize the browser window, the whole map renders.

这就是我调用地图的方式

That is how I invoce the 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> &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之前(在其中初始化地图).该地图将不会显示在起始页面上，而是会在您单击子菜单点时显示.

The map is wrapped in a container. Everything I found online regarding this problem points to relative sizes in the map- or its parent container. However, I have absolute sizes. I load the .css before the .js (where I initialize the map). The map will be displayed not on the startpage, but when you click on a submenue point.

为什么地图显示不正确?

Why is the map not rendered properly?

推荐答案

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

The map will be displayed not on the startpage, but when you click on a submenue point.

您要在隐藏或零尺寸的容器上初始化地图，这使此问题成为

You're initializing the map on a hidden or zero-size container, which makes this question a duplicate of 2nd leaflet map not rendering correctly

答案是相同的:只要地图变得可见或更改其尺寸或可见性，请运行map.invalidateSize().

The answer is the same: run map.invalidateSize() whenever the map should become visible, or when you change its dimensions or visibility.

这篇关于传单只渲染到一个角落的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！