传单没有渲染地图

leaflet doesn't render map

本文关键字：地图 单没      更新时间：2023-09-26

我有一个奇怪的问题与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结构和所有的瓷砖加载，但地图区域只是灰色的。缩放按钮和归属文本是可见的。

经过一些调试后，我发现如果我在.leaf -tile-container中添加size，则呈现工作:

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

我做错了什么?我应该把它添加到我的CSS中吗?我想我做错了什么，地图没有自动设置大小

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

.map-view img {
   max-width: none;
   max-height: none;
}
相关文章：