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

我无法获得基本的LeafletJS示例工作。我的日志表明正在导入LeafletJS，并且正在绑定到我的#map div。此外，我的调试器中的网络选项卡确认leaflet.js和leaflet.css正在加载。基本传单示例在浏览器中未显示任何内容

有谁能告诉我我错过了什么吗？我所看到的只是一个空白的白色浏览器窗口。

谢谢！

<!doctype html> 
<html> 
<head> 
    <title>A Leaflet map!</title> 
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/> 
    <script src="https://unpkg.com/[email protected]/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

来源

2017-04-04 Casey

该问题不在小册子代码中，而是在css中。您指定#map div的高度为100%，但其父母的身高（<body>）未设置。此外，您还需要设置#map的宽度。

参照这个稍作修改的jsFiddle：https://jsfiddle.net/k16r8s9g/

来源

2017-04-04 23:48:22

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

回答

相关问题