在不可见的div中创建lealetjs映射

Question

我在leafletjs幻灯片中添加了一个remarkjs映射。如果包含地图div的幻灯片在网页初始加载时可见，则地图工作良好。但是，如果带有map div的幻灯片不是可见的幻灯片，那么map div是不可见的，因此传单地图不能正常工作，因为所有的贴图都不是在div中加载的。我想做的是加载幻灯片中的所有地图div，不管它们在哪一张幻灯片上，然后让它们在包含地图的幻灯片出现时正确地显示出来。

更新：建议的答案看起来确实应该回答我的问题，但是我仍然被困住了，并且不确定我是否在正确的轨道上。下面是更多的细节。

因为我可以将许多地图添加到幻灯片中，所以我使用了映射div的类名。

// css
.map { width: 100vh; height: 100vh; }

// html
<div class="map" data-lat="47" data-lon="106"></div>
<div class="map" data-lat="0" data-lon="0"></div>
<!-- possibly on a different slide -->
<div class="map" data-lat="30" data-lon="28"></div>

// js
var maps = []; // for storing map elements
var mapDivs = document.getElementsByClassName('map');

for (var i=0, j=mapDivs.length; i<j; i++) {
    var map = L.map(mapDivs[i]).setView(
        [mapDivs[i].dataset.lat, mapDivs[i].dataset.lon], 
        13
    );

    // store map for later
    maps.push(map);
    L.tileLayer(…).addTo(map);
}

slideshow.on('showSlide', function (slide) {
    for (var i=0, j=maps.length; i<j; i++) {
        maps[i].invalidateSize();
    }
});

我的逻辑是上面所说的应该有效，但它不起作用。我做错了什么？

Update2: map.invalidateSize()答案确实是解决方案的一部分。我的错是我打电话给slideshow.on('showSlide', fn)，但我真的应该打电话给slideshow.on('afterShowSlide', fn)。后者为remarkjs提供了一个实际创建当前幻灯片的机会，该幻灯片可能具有映射div，这反过来又允许map.invalidateSize()正确地启动和重新绘制映射。

Answer 1

leafletjs需要一个宽度和高度> 0px的div才能存在，也就是说，要下载所需的地图块并显示地图，必须是可见的，而不是隐藏的。将地图div添加到remarkjs幻灯片中意味着在启动幻灯片时会隐藏其中的一个或多个div。因此，在浏览器调整大小之前，leafletjs将无法在这些div中显示地图(将丢失随机块)，迫使leafletjs重新计算映射div的大小并下载正确的贴片。解决方案是在显示带有映射div的幻灯片时触发map.invalidateSize()方法。这是我最后是怎么做到的

/* css ******************************/
.map { width: 100vh; height: 100vh; }


<!---------------------------------------------
html
map divs possibly on different slides, with a
`map: true` property on each slide with a map
----------------------------------------------->

---
map: true
<div class="map" data-lat="47" data-lon="106"></div>
---
map: true
<div class="map" data-lat="0" data-lon="0"></div>
---
map: true
<div class="map" data-lat="30" data-lon="28"></div>

// js /////////////////////////////////////////
var maps = []; // for storing leaflet map elements
var mapDivs = document.getElementsByClassName('map');

for (var i=0, j=mapDivs.length; i<j; i++) {

    // store map for later
    maps.push(L.map(mapDivs[i]).setView(
        [mapDivs[i].dataset.lat, mapDivs[i].dataset.lon], 
        zoomLevel
    ));

    // add map to the tileLayer
    L.tileLayer(…).addTo(maps[i]);
}

// use the 'afterShowSlide' event to ensure the 
// map div has been created
slideshow.on('afterShowSlide', function (slide) {

    // only if the slide has a 'map' property
    if (slide.properties.map) {
        for (var i=0, j=maps.length; i<j; i++) {
            maps[i].invalidateSize();
        }
    }
});