Leaflet.js 地图未显示答案

【问题标题】：leaflet.js map is not showing upLeaflet.js 地图未显示
【发布时间】：2016-08-29 15:57:42
【问题描述】：

我是leaflet.js 的新手。谁能帮我调试以下代码？我正在尝试在屏幕上显示地图，但 Google Chrome 上只显示放大和缩小按钮，并且地图屏幕为空。

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
        <style>
            #mapid { height: 180px; }
        </style>
    </head>

    <body>
        <div id="mapid"></div>
        <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
        <script>
            var mymap = L.map('mapid').setView([51.505, -0.09], 13);
        </script>
    </body>
</html>

【问题讨论】：

标签： maps leaflet dc.leaflet.js

【解决方案1】：

这是您更正后的代码：http://plnkr.co/edit/E7dw2AuNbLneYpz51Qdi?p=preview

您的代码中没有图块提供程序，因此您的地图中没有显示任何内容。

查看http://leafletjs.com/examples/quick-start-example.html的来源

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

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
                 '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                 'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    id: 'mapbox.streets'
}).addTo(mymap);

如果您不想使用 mapbox 中的图块，可以使用 openstreet map

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);

【讨论】：

【解决方案2】：

重读Leaflet quick-start tutorial，特别是这个位：

值得注意的是，Leaflet 与提供程序无关，这意味着它不会强制选择特定的磁贴提供程序，甚至不包含单个提供程序特定的代码行。

Leaflet 不添加任何默认地图数据。您可以告诉 Leaflet 您要显示哪些数据（矢量特征、切片图层）。

【讨论】：

【解决方案3】：

如果像我这样的其他人来这里寻找 Leaflet 不显示的原因，我发现 Chrome 不会显示我的地图，除非我设置了 div 的宽度和高度。如前所述，这不是 OP 的主要问题，但他们的代码也缺少宽度规范。

【讨论】：