leaflet.js Karte wird nicht angezeigt

Ich bin ein Neuling zu leaflet.js. Kann mir jemand beim Debuggen des folgenden Codes helfen? Ich versuche, eine Karte auf dem Bildschirm anzuzeigen, aber nur die Schaltfläche zum Vergrößern und Verkleinern wird in Google Chrome angezeigt und der Kartenbildschirm ist leer.leaflet.js Karte wird nicht angezeigt

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

Quelle

2016-05-04 anandg112

Hier ist Ihr korrigierten Code: http://plnkr.co/edit/E7dw2AuNbLneYpz51Qdi?p=preview

Es gibt keine Kachelanbieter in Ihrem Code, so in der Karte nichts angezeigt wird.

Schauen Sie sich die Quelle der 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);

Wenn Sie keine Fliesen wollen aus MapBox, können Sie Openstreet verwenden Karte

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

Quelle

2016-05-04 10:27:11 YaFred

Vielen Dank, sehr geschätzt. Es funktioniert jetzt. – anandg112

Re-lesen Sie die Leaflet quick-start tutorial, insbesondere dieses Bit:

Es ist erwähnenswert, dass Leaflet Provider-Agnostic ist, was bedeutet, dass es nicht funktioniert

Leaflet fügt keine Standardkartendaten hinzu. Es liegt an Ihnen, Leaflet mitzuteilen, welche Daten (Vektor-Features, Kachel-Layer) Sie anzeigen möchten.

Quelle

2016-05-04 10:30:44 IvanSanchez

leaflet.js Karte wird nicht angezeigt

Antwort

Verwandte Themen