javascript - 传单 map 出现在编辑器中，但不在现场

我目前正在使用带有实时预览扩展的 Atom，它可以准确显示我的页面应该的样子。也就是说，当我去实际网站时，我只看到标题，而不是 map 。不确定发生了什么。我试过 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/leaflet@1.0.3/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/leaflet@1.0.3/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);

最佳答案

通过删除 #map-container div 并将 html 和 body 设置为 100% 并将映射设置为 100% 来修复它。

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

#map {
  height: 100%;
}

关于javascript - 传单 map 出现在编辑器中，但不在现场，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42240160/

javascript - 传单 map 出现在编辑器中，但不在现场

上一篇：css - 如何创建一个带有动画占位符的表单？

下一篇：javascript - 导航不同的页面