移动/小视口上的传单 fitBounds 问题答案

【问题标题】：Leaflet fitBounds issue on mobile/small viewport移动/小视口上的传单 fitBounds 问题
【发布时间】：2014-09-13 21:41:08
【问题描述】：

我在使用 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 分别是两个标记的纬度和经度的数组，从小到大排列。

有什么想法吗？

【问题讨论】：

标签： leaflet

【解决方案1】：

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

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

除此之外，请确保包含正确的视口。如果您不提供，Leaflet 可能会有一些不良行为。

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

【讨论】：