基本傳單示例在瀏覽器中未顯示任何內容

我無法獲得基本的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

基本傳單示例在瀏覽器中未顯示任何內容

回答

相關問題