[英]leaflet blank screen on meteor but not on single nonmeteor test.html
我在流星上使用传单,但它仅显示空白(灰色)地图,而不显示地图图块。 当我在单个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 :)");
};
但这是行不通的。 是什么导致空白地图错误? 我的浏览器控制台未显示任何错误。
好的,我想出了问题所在。 我有一个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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.