Question

我一直在使用Leaflet的fitBounds方法遇到一些奇怪的问题，当我在移动设备的浏览器窗口（移动设备或桌面）上测试它时，似乎只会出现这种问题。我给fitBounds一个西南角和一个对应两个标记的东北角。在一个全尺寸的屏幕上它工作正常;地图以适当的缩放级别在两者之间重新定位（您可以看到两者）。但是在具有纵向方向的小屏幕上，地图中心似乎在两个标记之间的中心稍微向东，并且标记都略微偏离窗口。如果我拖动地图一点点，它突然向东跳，似乎在两个标记之间的适当中心点重新定位。

这是我的代码：

var bounds = L.latLngBounds([coordLats[0], coordLons[0]], [coordLats[1], coordLons[1]]);
map.fitBounds(bounds);
fixZoom();

function fixZoom(){
    var z = map.getZoom()
    z = z > 18 ? 18 : z; //don't go beyond max zoom!
    map.setZoom(z);
};

coordLats和coordLongs是分别具有两个标记的纬度和经度的数组，排序最小到最大。

有什么想法吗？

Answer 1

首先，不要使用这个粗糙的maxZoom黑客。 L.TileLayer中有一个选项可以设置最大缩放。

L.tileLayer('http://tiles.lyrk.org/lr/{z}/{x}/{y}', {
    maxZoom: 18
}).addTo(map);

除此之外，请确保包含正确的视口。如果您没有提供，传单可能会有一些不受欢迎的行为。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Leaflet fitBounds问题在移动/小视口上

1 个答案: