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

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

＆＃13;

   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);

＆＃13;

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

＆＃13;

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

你想改变什么坐标？

Answer 2

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

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

你应该记住第一个坐标纬度，取范围内的数字（-90,90），而第二个坐标经度应设置在范围内（-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);

宣传单地图未加载

3 个答案: