传单地图未加载

Question

我对传单还很陌生，所以我只是想掌握基础知识。按照 Leaflet 提供的在线教程进行操作时，我很难加载地图。如果我使用提供的坐标没有问题，但是如果我更改坐标，则不会加载任何内容。

有人可以帮忙吗？这是我拥有的：

<!DOCTYPE html>
  <html>
   <head>
    <title>Leaflet Web Map</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
 <style>
  #map {
  width: 960px;
  height:500px;
  }
</style>
</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>

这个加载没有问题，但如果我改变坐标它根本不会加载。

Answer 1

我无法重现您的问题。更改中心仍会加载地图。（单击下面的 [运行代码段] 按钮）

   var map = L.map('map', {
     //center: [43.64701, -79.39425], //comment out one of the centers
     center: [40, -80],
     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);

<!DOCTYPE html>
<html>

<head>
  <title>Leaflet Web Map</title>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <style>
    #map {
      width: 960px;
      height: 500px;
    }
  </style>
</head>


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

</html>

我注意到你没有结束正文，结束 html 标签，所以我添加了这些。

您要更改什么坐标？

Answer 2

要更改地图中心，您应该在地图中更改它属性：center: [43.00, -79.00]。

var map = L.map('map',{
  center: [43.00, -79.00],
  zoom: 15
});

您应该记住，第一个坐标 latitude 取值范围 (-90, 90)，而第二个坐标 longitude应设置在范围 (-180, 180) 内。但是无论如何，如果您超出第二个坐标应用程序，它将只计算它的值，就像它在给定范围内一样。

也许你混淆了一些东西并试图在这里改变它L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',..？此行代表加载底图图块，而不是使地图居中。

Answer 3

尝试

var tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',
    {
        attribution: false
    });

var map = L.map('map',
    {
        zoomControl: true,
        layers: [tileLayer],
        maxZoom: 18,
        minZoom: 6
    })
    .setView([43.64701, -79.39425], 15);

   setTimeout(function () { map.invalidateSize() }, 800);

传单地图未加载

Leaflet map not loading

javascript

dictionary

tiles

leaflet