Leaflet Tutorial Blank Ergebnis

Ich habe versucht, Leaflet durch das erste Tutorial zu verstehen, und meine Seite bleibt leer. Hier ist das Tutorial, das ich folgte http://leafletjs.com/examples/quick-start/Leaflet Tutorial Blank Ergebnis

Unten ist der Code, den ich mit einem Access-Token geschrieben hatte, die ich generiert habe. Ich verstehe nicht, was falsch ist. Ich habe es über GitHub Pages getestet.

<!DOCTYPE html> 
 
<html lang="en"> 
 
<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{ width 960px; height: 100% } 
 
    </style> 
 
</head> 
 
<body> 
 

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

 
    <script> 
 
    // initialize the map 
 
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { 
 
    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>', 
 
    maxZoom: 18, 
 
    id: 'leafletTestToken1', 
 
    accessToken: 'pk.eyJ1IjoiYmxhY2ttb3JlMCIsImEiOiJjaXlub251ZjIwMDJmMnBxems2bmpiYXA2In0.2Hxl5QoDhIY6OR4p3GsU2w' 
 
}).addTo(map); 
 
    </script> 
 
</body> 
 
</html>

Quelle

2017-02-02 helpkelp

Es gibt ein paar Probleme. Das wichtigste ist, dass Sie keine Karte erstellt haben; Sie haben nur eine Kachelebene erstellt. Sie müssen eine Karte erstellen, zu der die Kachelebene hinzugefügt werden kann. Zum Beispiel:

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

Auch wird die id scheint nicht gültig. Es muss einer Mapbox-Projekt-ID oder einer der vordefinierten Mapbox-Karten-IDs entsprechen. Zum Beispiel:

id: 'mapbox.streets'

Und das CSS ist nicht gültig; Es gibt eine fehlende : nach width.

Es wird unten eine Arbeits Snippet:

var map = L.map('map').setView([51.505, -0.09], 13); 
 
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { 
 
    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>', 
 
    maxZoom: 18, 
 
    id: 'mapbox.streets', 
 
    accessToken: 'pk.eyJ1IjoiYmxhY2ttb3JlMCIsImEiOiJjaXlub251ZjIwMDJmMnBxems2bmpiYXA2In0.2Hxl5QoDhIY6OR4p3GsU2w' 
 
}).addTo(map);

body { margin: 0 } 
 
#map { width: 100vw; height: 100vh }

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> 
 
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> 
 
<body> 
 
    <div id="map"></div> 
 
</body>

Quelle

2017-02-02 02:24:07 cartant

Vielen Dank! Ich dachte, dass die Kartenvariable auf den ersten Blick drin war. Dank dir kann ich es zum Laufen bringen. Ich habe jedoch etwas bemerkt, das ich nicht verstehe: Wenn ich die übliche Deklaration einschließe, wird die Seite nicht geladen. Wenn ich es aus der Datei entferne, lädt es gut. Liegt das daran, dass die Deklaration nicht benötigt wird, wenn die Datei bereits .html ist? – helpkelp

In einer HTML-Datei würde '' erwartet, also sollte es keine Probleme verursachen. In Ihrem Kommentar haben Sie jedoch ein Leerzeichen zwischen dem '<' und dem '! DOCTYPE' - das wäre ein Problem. – cartant

Leaflet Tutorial Blank Ergebnis

Antwort

Verwandte Themen