[英]leaflet doesn't render map
I have a weird problem with leafletjs. 我对leafletjs有一个奇怪的问题。 It is my first time using this library and I don't understand what's going on.
这是我第一次使用该库,我不知道发生了什么。
Here is the code:
// right after <footer> tag
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
var map = L.map('cartomap').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
</script>
// header
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
// content
<div id="cartomap" class="map"></div>
//style
.map {
width: 100%;
height: 300px;
}
The map doesn't render. 地图不渲染。 I checked the HTML structure and all the tiles are loaded but the map area is just gray.
我检查了HTML结构,所有图块均已加载,但地图区域仅为灰色。 Zoom buttons and attribution text are visible.
缩放按钮和属性文本可见。
After some debugging, I found out that the rendering works if I add size to the .leaflet-tile-container: 经过一些调试后,我发现如果将.leaflet-tile-container添加大小,则渲染可以正常工作:
.leaflet-tile-container {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
What am I doing wrong? 我究竟做错了什么? Should I add this to my CSS?
我应该将此添加到我的CSS中吗? I think I am doing something wrong that the map doesn't automatically set the size.
我认为我做错了地图不会自动设置大小的问题。
After some more digging I finally found the problem. 经过更多的挖掘之后,我终于找到了问题所在。 Leaflet doesn't like
max-width
and max-height
. 传单不喜欢
max-width
和max-height
。 I don't know why. 我不知道为什么 I just added the following to my CSS:
我刚刚在CSS中添加了以下内容:
.map-view img {
max-width: none;
max-height: none;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.