logo标签列表

leaflet.js地图未显示出来

mapsleafletdc.leaflet.js
26

我是一个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>
3个回答
60

以下是您的修正代码：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的瓦片，可以使用OpenStreetMap。

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

请重新阅读Leaflet快速入门教程，特别是这一部分：

值得注意的是，Leaflet不依赖于任何提供商，这意味着它不会强制选择特定的瓦片提供商，甚至不包含任何特定于提供商的代码。

Leaflet不会添加任何默认地图数据。你需要告诉Leaflet你想要显示哪些数据（矢量特征、瓦片图层）。

8

如果有其他像我一样的人在这里寻找Leaflet不显示的答案，我发现只设置高度是不行的，必须同时设置div的宽度。正如之前所说，这不是楼上问题的主要原因，但他们的代码也缺少了宽度规范。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接