如何将Leaflet贴图嵌入Reveal.js演示文稿？ [英] How to embed a Leaflet map into a Reveal.js presentation?

问题描述

我试图创建一个运行在Reveal.js之上的演示文稿，其中包括一个幻灯片中的Leaflet.js地图。我已经包括所有必要的Javascript& CSS文件到我的Reveal.js演示文稿，我可以使地图出现在幻灯片上。

I am trying to create a presentation running on top of Reveal.js, which would include a Leaflet.js map within one of the slides. I have included all necessary Javascript & CSS files into my Reveal.js presentation and I can make the map appear on the slide.

但是，问题是：地图拼贴无法正确显示。而不是实际的地图砖，我看到的是灰色背景和一些水平的黑色线条。我可以放大/缩小和平移地图，黑线也相应地移动。

However, the problem is: map tiles are not displayed correctly. Instead of the actual map tiles, all I am seeing is gray background and some horizontal black lines. I can zoom in/out and pan the map, and the black lines are moving accordingly.

Javascript控制台中没有错误消息，浏览器似乎正在从服务器下载地图图块。我相信这个问题与Leaflet贴图的CSS代码有关 - .leaflet-tile 在leaflet.css - 与Reveal.js有些不兼容。

There are no error message in the Javascript console, and the browser seems to be downloading map tiles from server exactly as it should. I believe the problem has something to do with the CSS code of Leaflet map tiles - .leaflet-tile within leaflet.css - being somehow incompatible with Reveal.js.

问题是：有人知道如何解决这个问题吗？

The question is: Does anyone know how to get around this issue? Or is it a deadend with no possible solution?

我有< div id =map> ：

#map {
    height:400px;
    width:100%;
}

EDIT：使用< iframe> 标记将地图嵌入演示文稿。似乎工作很好，也许最好保持框架分离。然而，缺点是如果在演示中存在若干映射，每个映射在它自己的< iframe> 中，则Leaflet.js的副本被加载到存储器中，每个iframe。

One obvious workaround for this is to use <iframe> tag to embed the map into the presentation. Seems to work just fine, and maybe it is better to keep the frameworks separated. However, the downside is that if there are several maps in the presentation, each within its own <iframe>, a copy of Leaflet.js is loaded to memory for each and every iframe.

编辑＃2：一个更好的解决方案，似乎是使用 Polymaps ，而不是 Leaflet.js 。看来，一些多边形地图地图可以嵌入到 reveal.js presentaion中。没有问题。

EDIT #2: A better solution, it seems, is to use Polymaps instead of Leaflet.js. It seems that several Polymaps maps can be embedded into a reveal.js presentaion. No issues.

推荐答案

这可能是因为 #map 在初始化时隐藏（由于隐藏的幻灯片），因此无法读取尺寸。

It might be happening because the #map element is hidden (due to the hidden slide) when it is initialized, so it cannot read the dimensions..

尝试使用<$ c $

Try using map.invalidateSize(false); once your slide becomes visible..

Reveal.addEventListener( 'slidechanged', function( event ) {
    // event.previousSlide, event.currentSlide, event.indexh, event.indexv
    if (event.indexh == 5){ // assuming your 5th slide is the one with the map
        map.invalidateSize(false); // assuming that map holds the the reference to your leaflet instance
    }
} );

这篇关于如何将Leaflet贴图嵌入Reveal.js演示文稿？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！