javascript - 使用传单的 map 未使用 javascript 显示

标签 javascript leaflet

为什么加载我的 html 时 map 不显示?初学者 这是我的代码

<!DOCTYPE html>
<html>
<head>
<title>Leaflet Web Map</title>
<style type="text/css">
    #map {
        width: 960px;
        height: 500px;
    }

</style>
<link rel="stylesheet" href="css/leaflet.css" />
<script src="js/leaflet.js"> </script>  
</head>
<body>
<script>
    var map = L.map('map',{
    center: [43.64701, -79.39425],
    zoom: 15
    });

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

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

css源码和脚本源码来 self 的老师

最佳答案

您应该尝试将脚本移至页面底部:

<!DOCTYPE html>
<html>
<head>
  <title>Leaflet Web Map</title>
  <style type="text/css">
    #map {
      width: 960px;
      height: 500px;
    }
  </style>
  <link rel="stylesheet" href="css/leaflet.css" />
  <script src="js/leaflet.js"> </script>  
</head>
<body>
  <div id="map"></div>
  <script>
    var map = L.map('map',{
      center: [43.64701, -79.39425],
      zoom: 15
    });

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

关于javascript - 使用传单的 map 未使用 javascript 显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52236157/

相关文章:

javascript - 覆盖窗口上的函数

svg - 传单中的彩色 SVG 图标

javascript - 如何在浏览器调整大小时触发缩小事件?

javascript - 为什么我的 jQuery 委托(delegate)点击会触发多次?

javascript - 使用 Url.action() 传递动态 javascript 值

javascript - Node (express.js) next() 在流结束之前调用

javascript - 是否需要用 new 来调用 es6 类?

javascript - React-Leaflet 通过状态变化改变 GEOJSON 形状颜色

javascript - 传单 map 不显示

javascript - .addOn 在此传单示例代码中如何工作/执行?