Question

我无法使基本的LeafletJS示例正常工作。我的日志表明正在导入LeafletJS，并且某些东西被绑定到我的#map div。我的调试器中的网络选项卡也确认正在加载leaflet.js和leaflet.css。

谁能告诉我我缺少什么？我所看到的只是一个空白的白色浏览器窗口。

谢谢！

<!doctype html>
<html>
<head>
    <title>A Leaflet map!</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"/>
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <style>
        #map{ height: 100% }
    </style>
</head>
<body>

    <div id="map"></div>

    <script>
        console.log('L', L)

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

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

        console.log('map', map)
    </script>
</body

Answer 1

问题不在于传单代码，而在于css。您已将#map div的高度指定为100%，但未设置其父级的高度（<body>）。此外，您还需要设置#map的宽度。

请参阅此略微修改的jsFiddle：https://jsfiddle.net/k16r8s9g/

基本Leaflet示例未在浏览器中显示任何内容

1 个答案: