2017-04-04 35 views
1

Ich habe Probleme, das grundlegende LeafletJS-Beispiel zu erhalten. Meine Logs zeigen an, dass LeafletJS importiert wird und etwas an mein #map div gebunden wird. Auch die Netzwerk-Registerkarte in meinem Debugger bestätigt, dass die leaflet.js und leaflet.css geladen werden.Grundlegendes Beispiel zeigt nichts im Browser an

Kann mir jemand sagen, was ich vermisse? Alles, was ich sehe, ist ein leeres weißes Browserfenster.

Danke!

<!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 

Antwort

3

Das Problem ist nicht im Prospektcode, sondern in CSS. Sie haben #map divs Höhe als 100% angegeben, aber die Höhe des übergeordneten Elements (<body>) ist nicht festgelegt. Zusätzlich müssen Sie die Breite von #map einstellen.

Siehe hierzu leicht modifizierte jsFiddle: https://jsfiddle.net/k16r8s9g/