Question

我一直试图通过第一个教程了解Leaflet，我的页面一直空白。这是我关注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/leaflet@1.0.3/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.0.3/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>

Answer 1

有一些问题。最重要的是你还没有创建地图;你只创建了一个图块层。您需要创建一个可以添加切片图层的地图。例如：

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

此外，id似乎无效。它需要与Mapbox项目ID或其中一个预定义的Mapbox地图ID相对应。例如：

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/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<body>
  <div id="map"></div>
</body>

宣传单教程空白结果

1 个答案: