使用传单的地图未使用javascript显示

时间:2018-09-08 14:17:38

标签: javascript leaflet

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

<!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源和脚本源来自我的老师

1 个答案:

答案 0 :(得分:3)

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

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