带有压缩后的瓷砖的LeafletJS渲染

Question

我正在使用LeafletJS在网站上的许多地方显示地图。

在大多数情况下，它工作正常，但是在一个特定页面上，我得到了一个奇怪的渲染故障，看起来像这样：

如您所见，地图在每个图块边界处使用垂直的灰色条进行渲染。另外，如果我将标记添加到地图，它们也会显示被压缩。

奇怪的是，我使用相同的代码（即完全相同的JS文件）在其他页面上呈现相似的地图而没有任何问题。我还使用类似的代码在同一页面上渲染了另外两个地图，同样没有问题。

JS代码如下：

(function(L) {
    var element = document.querySelector('.details-map');
    if (!element) { return; }
    var coords = element.getAttribute('data-coords');
    var latlng = coords.split(',');
    var location = {lat: parseFloat(latlng[0]), lng: parseFloat(latlng[1])};

    var zoom = element.getAttribute('data-zoom');

    var map = new L.Map(element, {center: location, zoom: zoom, gestureHandling: true});
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
    }).addTo(map);
})(L);

关联的HTML如下所示：

<div class="details-map" data-coords="51.5216,-0.71998" data-zoom="14"></div>

渲染毛刺在所有缩放级别上都会发生，并且在执行map.invalidateSize()之类的操作以强制重新绘制后仍然存在。

有人可以解释为什么我会遇到这种故障以及如何解决它吗？谢谢。

Answer 1

经过大量挖掘，我终于解决了这个问题。

问题是一些CSS链接到DOM树上较远的某个元素，而该元素与地图并不真正相关。看起来像这样：

.local-branch img {
    vertical-align: top;
    display: inline-block;
    width: 25%;
    padding: 0 10px;
}

此CSS的目的是布置一组与分支相关的图像。稍后，该地图将作为分支详细信息的一部分添加到.local-branch元素中。显然，这些样式并不是要应用于地图，而是因为CSS选择器太宽泛而仍在应用。

我需要找到一种不会破坏现有图像布局的方法来修复它，这仍然需要一些思考，但是至少我已经弄清了正在发生的事情，所以谜团得以解决。 / p>