Question

以下是代码：

mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';

var map = L.map('map').setView([25.7617,-80.18], 30);
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; ' + mapLink + ' Contributors',
    maxZoom: 18,
}).addTo(map);

它没有错误，但它以灰色开始，除非我缩放。我缺少一个属性还是什么？必须是瓷砖问题吗？

Answer 1

设置初始视图时：

var map = L.map('map').setView([25.7617,-80.18], 30);

您要求的缩放级别为30，这远远超出您的图块层所能提供的范围（maxZoom: 18）。

只要您手动执行缩放请求，Leaflet就会缩放到可能的缩放范围内，即返回到18。

演示：http://jsfiddle.net/3v7hd2vx/30/

只需将初始视图设置为可能的缩放范围（例如，在您的情况下小于或等于18），您就可以了。

var map = L.map('map').setView([25.7617,-80.18], 10);

演示：http://jsfiddle.net/3v7hd2vx/31/

Answer 2

我通过使用以下方式加载图层后设置缩放来解决此问题：

map.setZoom(10);

在执行缩放之前不会加载地图图块（Leaflet）

2 个答案: