Question

我对leafletjs有一个奇怪的问题。这是我第一次使用这个库，我不明白发生了什么。

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: '&copy; <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;
}

地图无法渲染。我检查了HTML结构并加载了所有图块，但地图区域只是灰色。缩放按钮和归属文本可见。

经过一些调试后，我发现如果我在.leaflet-tile-container中添加大小，渲染就有效：

.leaflet-tile-container {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

我做错了什么？我应该将它添加到我的CSS吗？我认为我做错了，地图不会自动设置大小。

Answer 1

经过一番挖掘，我终于找到了问题所在。传单不喜欢max-width和max-height。我不知道为什么。我刚刚在CSS中添加了以下内容：

.map-view img {
   max-width: none;
   max-height: none;
}

传单不呈现地图

1 个答案: