リーフレットチュートリアル空白結果

私はリーフレットを最初のチュートリアルを通して理解しようとしていて、私のページは空白になっています。ここに私が従っていたチュートリアルhttp://leafletjs.com/examples/quick-start/リーフレットチュートリアル空白結果

以下は、私が生成したアクセストークンで書いたコードです。私は何が間違っているのか分からない。私はGitHub Pagesを通してテストしています。

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

出典

2017-02-02 helpkelp

いくつかの問題があります。最も重要な点は、マップを作成していないことです。タイルレイヤーを作成しただけです。タイルレイヤーを追加できるマップを作成する必要があります。たとえば、

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

また、idは有効ではありません。これは、マップボックスプロジェクトIDまたはあらかじめ定義されたマップボックスマップIDの1つに対応する必要があります。例：

id: 'mapbox.streets'

CSSが無効です。 widthの後ろには:がありません。

作業スニペットは以下があります：

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>

出典

2017-02-02 02:24:07 cartant

ありがとうございました！一見すると地図変数がそこにあると思った。あなたのおかげで私はそれを働かせることができました。しかし、私は理解できないことに気付きました。通常の<！DOCTYPE html>宣言を含めると、ページは読み込まれません。それをファイルから削除すると、正常に読み込まれます。これは、ファイルがすでに.htmlのときに宣言が必要ないためですか？ – helpkelp

HTMLファイルでは、 '<！DOCTYPE html>'が予想されるため、問題は発生しません。しかし、あなたのコメントでは、 '<'と '！DOCTYPE'の間にスペースがあります - それは問題になります。 – cartant

リーフレットチュートリアル空白結果

答えて

関連する問題