leaflet - Leaflet.js fitBounds 与填充？

Question

我正在尝试在这样的传单地图中设置 fitBounds 选项：

var bounds = new L.LatLngBounds([[Math.max(lat, borneLat), Math.max(lng, borneLng)], [Math.min(lat, borneLat), Math.min(lng, borneLng)]]);
map.fitBounds(bounds, { padding: [20, 20] });

但是，这似乎没有添加任何填充？至少地图“缩放级别”没有改变，它总是显示边缘的两个点（即一个在最右边，另一个在最左边）。对于某些标记集，它可以正常工作，缩放处于适当的水平，您可以很好地看到一切。但是，当这些项目彼此非常接近时，它似乎放大了一点，除非我可以用一些“填充”来适应它。

另外我不确定边界是否正确？我应该改用：

var bounds = [[Math.max(lat, borneLat), Math.max(lng, borneLng)], [Math.min(lat, borneLat), Math.min(lng, borneLng)]];

Answer 1

map.fitBounds(bounds, {padding: []})应该管用。我建议您将填充更改为例如。[50, 50]，也许你的填充值太小了。

查看这个JSFiddle 示例。

Answer 2

我遇到了这个问题。据我了解，填充由缩放控制。在我的示例中，所有小于 10 的填充设置都没有区别。一旦填充达到 10，地图就会缩小一级并且有填充。进一步增加填充值没有影响，直到达到另一个缩小级别。

Answer 3

默认情况下，Leaflet 仅在整数值缩放级别之间缩放。过去的 1.0.0 版本，“分数缩放”可通过“zoomSnap”参数获得：

var map = L.map('map', {
    zoomSnap: 0.1
});

这将允许较小的填充值可见，但也会影响 scrollWheelZoom 行为。

Answer 4

FWI，您还可以像这样为地图设置最大缩放级别：

var map = L.mapbox.map('map', 'mapbox.emerald', {
    maxZoom: 16
});

这样你可以避免地图放大太多，以防标记太靠近。