リーフレットマップがエディタに表示されますが、サイトには表示されません

現在、私のページがと思われるものを正確に示す、ライブプレビュー拡張機能付きAtomを使用しています。つまり、実際のサイトに行くと、地図ではなくヘッダーのみが表示されます。何が起こっているのか分かりません。私はCTRL-F5を試して、効果のないページを再読み込みしました。ここに私が持っているものがあります。リーフレットマップがエディタに表示されますが、サイトには表示されません

index.htmlを

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Map Prototype</title> 
    <link rel="stylesheet" href="css/index.css" /> 
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> 
    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/sandstone/bootstrap.min.css" rel="stylesheet" integrity="sha384-G3G7OsJCbOk1USkOY4RfeX1z27YaWrZ1YuaQ5tbuawed9IoreRDpWpTkZLXQfPm3" crossorigin="anonymous"> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> 
    </head> 

    <body> 
    <nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">...</button> 
      <a class="navbar-brand" href="index.html">Map Demo</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="index.html">Home</a></li> 
      <li><a href="http://vietnamwarstories.indiana.edu/" target="_blank">Website</a></li> 
      <li><a href="http://vietnamwarstories.indiana.edu/contact/" target="_blank">Contact</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"></ul> 
     </div> 
    </nav> 

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

    <script src="js/map.js"></script> 
    </body> 
</html>

index.css

html, body { 
    padding: 0; 
    margin: 0; 
} 

#map-container { 
    height: 100%; 
    width: 100%; 
} 

#map { 
    width: 100%; 
    height: 100%; 
}

map.js

var map = L.map ('map', { center: [16.056, 100.745], zoom: 6 }); 

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

出典

2017-02-15 Vigilant

＃マップ・コンテナを削除し、固定サイズに#map設定（幅：960ピクセル; 高さ：500pxなどは;）ではなく、それが働いていた...しかし、サイズはスケーラブルであるためには、理想的に私が欲しいです。 – Vigilant

だけ#maを削除して、それを修正しますp-container divでhtmlとbodyを100％に設定し、100％にマップします。

html, body { 
    padding: 0; 
    margin: 0; 
    height: 100%; 
} 

#map { 
    height: 100%; 
}

出典

2017-02-15 04:09:58 Vigilant

リーフレットマップがエディタに表示されますが、サイトには表示されません

答えて

関連する問題