流星上的传单空白屏幕，但不是单个非流星 test.html答案

【问题标题】：leaflet blank screen on meteor but not on single nonmeteor test.html流星上的传单空白屏幕，但不是单个非流星 test.html
【发布时间】：2015-08-19 14:44:17
【问题描述】：

我在流星上使用传单，但它只显示空白（灰色）地图，而不显示地图图块。当我在单个 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>

但是当我尝试在流星中这样做时它不起作用。我的流星设置：

我有一个 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;}。

所以现在我必须使用我的 Template.map.rendered 函数使用一些 javascript 来运行脚本

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 :)");


};

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

【问题讨论】：

你为什么在你的流星应用中使用 1.0.0 版本而不是 0.7.3 版本？
这只是一个小技巧，看看它是否只是 0.7.3 的问题。所以它也不适用于流星中的 1.0.0-b1 和 0.7.3。
好吧，我不得不说我很好奇，因为我的代码和你的几乎一样，而且从来没有遇到过问题。如果您想尝试，这是我的版本（使用另一个磁贴服务器）：var map = L.map('map',{center: [51.505, -0.09], zoom:13, maxZoom:18}); L.tileLayer("https://otile{s}-s.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpeg", {subdomains: "1234"}).addTo(map);
我知道这很奇怪。我也在另一个流星应用程序中做到了这一点，它工作正常，但不是在这个应用程序中。您的代码也仍然无法正常工作。我已经测试了几个瓷砖地图，但它不起作用。我也没有安装一些导致错误的特殊软件包。当我不加载leaflet.js 时，地图没有显示，所以我知道leaflet.js 已正确加载。但是我在使用传单和 jquery 的其他非流星项目中遇到了问题。所以必须先加载 jquery，否则它会显示空白地图容器。

标签： javascript meteor maps leaflet openstreetmap

【解决方案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

【讨论】：