小册子地图显示为灰色

我开始使用leaflet.js与quickstart，但我的地图显示为灰色......有什么我不见了？小册子地图显示为灰色

的script.js：

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

L.tileLayer('http://{s}.title.cloudmade.com/' + API_KEY + '/997/256/{z}/{x}/{y}.png', { 
     attribution: 'Map data &copy; [...]', 
     maxZoom: 18 
}).addTo(leafletMap); 

// marker 
var marker = L.marker([51.5, -0.09]).addTo(leafletMap);

的style.css：

#leafletMap { 
height: 200px; 
width: 200px; 
}

的index.html：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>My title</title> 

    <link rel='stylesheet' href='css/bootstrap.css'> 
    <link rel='stylesheet' href='css/leaflet.css'> 
    <!--[if lte IE 8]> 
     <link rel="stylesheet" href="leaflet.ie.css" /> 
    <![endif]--> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 

    <div id='leafletMap'></div> 

<script src='js/libs/jquery-1.10.2.js'></script> 
<script src='js/libs/bootstrap.js'></script> 
<script src='js/libs/leaflet-src.js'></script> 
<script src='js/config.js'></script> 
<script src='js/script.js'></script> 
</body> 
</html>

给我：

enter image description here

来源

2014-01-28 Connor Leech

您需要实现快速入门指南的下一部分：您已初始化地图，但未添加任何图块图层，因此为灰色。因此，请阅读以开头的部分接下来，我们将添加一个图块图层以添加到我们的地图。

来源

2014-01-28 14:41:12 tmcw

嘿对不起，我没有张贴我的代码的其余部分：https://github.com/jasonshark/drawing/blob/master/leaflet/js/script.js的标记出现，但不OSM数据 –

解决方案：这是一个错字：'http：// {s} .title.cloudmade.com /''应该是 - >'http：// {s} .tile.cloudmade.com /'' –

+1帮助传单教程，它需要在瓦片层代码后面放置第一个“demo”。它的位置不仅与'var map = L.map（'map'）。setView（[51.505，-0.09]，13）'一起，而且会让人错觉地图应该在这个点上工作。 – interpolack

另一件要注意的事情。

如果您检查网络选项卡，并且地图图块加载正常，但地图仍然为灰色，则可能是由于来自周围页面的CSS污染。

在我的情况是：

img { 
    max-height: 100%; 
}

修正与重写：

.my-leaflet-map-container img { 
    max-height: none; 
}

来源

2017-12-12 01:26:42 elMarquis

对于我离子的应用程序这是在我的地图配置设置trackResize: false解决。这只发生在Android上，并且只在Android上调用Leaflet源代码中的setTransform函数调用。

Leaflet.map('map', { trackResize: false })

来源

2018-02-05 06:02:52

小册子地图显示为灰色

回答

相关问题