流星上的传单空白屏幕，但单个非流星上没有 test.html

Question

我在 meteor 上使用传单，但它只显示空白（灰色）地图而不显示地图图块。当我在单个 html 文件中本地测试脚本时它的工作。

<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
test
<div id="map" style="height: 180px;"></div>
123
<script>

    var map = L.map('map').setView([51.505, -0.09], 13);


    L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
        maxZoom: 18
    }).addTo(map);

    var marker = L.marker([51.5, -0.09]).addTo(map);
    marker.bindPopup("some text :)");

</script>
</body>
</html>

但是当我尝试在 meteor 中执行时它不起作用。我的流星设置：

我有一个 main.html，我在其中声明了一些 CDN：

<head>
    <script src="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.css"/>
</head>

我也是用iron:router来路由的。所以有一个带有地图模板的 map.html，而我只有我的

<div id="map"></div>

我还在样式表中设置了#map{height: 180px;}。

所以现在我必须运行带有一些 javascript 的脚本和我的 Template.map.rendered 函数

Template.map.rendered = function () {

    var map = L.map('map').setView([51.505, -0.09], 13);
    L.Icon.Default.imagePath = "/images/leaflet/";


    L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
        maxZoom: 18
    }).addTo(map);

    var marker = L.marker([51.5, -0.09]).addTo(map);
    marker.bindPopup("some text :)");


};

但是不行。是什么导致空白地图错误？我的浏览器控制台没有显示任何错误。

Answer 1

好的，我知道问题出在哪里了。我有一个 reset.css，我的 UI.

有一些重置规则

这一行产生了错误：

div, a, p, img, blockquote, form, fieldset, textarea, input, label, iframe, code, pre {
    some stuff,
    some stuff,
    overflow:hidden;   <---------
}

所以看起来 leaflet 不喜欢带有 overflow:hidden 选项的 div

流星上的传单空白屏幕，但单个非流星上没有 test.html

leaflet blank screen on meteor but not on single nonmeteor test.html

javascript

maps

openstreetmap

leaflet

meteor