logo标签列表

Leaflet地图无法加载

javascriptdictionaryleaflettiles
4

我对leaflet非常陌生，所以我只是试图掌握基础知识。在遵循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>

这个不会有任何加载问题，但如果我更改坐标，它就无法加载。

3个回答
1
要更改地图中心，您应该在地图属性中更改它：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'，.. ？ 这行代码用于加载底图瓦片，而不是居中地图。
1
尝试
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);
0

我无法重现你的问题。更改中心仍会加载地图。(请点击下面的[运行代码片段]按钮)

   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>

我注意到你没有结束body和html标签，所以我添加了它们。

你想改变哪些坐标？

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接