将非地理传单地图 maxBounds 与容器底部对齐

Question

我正在使用传单创建一个非地理地图，其中显示了一个滑雪胜地。

JSFiddle：https://jsfiddle.net/exophunk/ruzgeqL4/

我使用map.fitBounds(bounds) 将地图适合容器，并使用map.setMaxBounds(bounds) 确保您不能平移到地图之外。

这在放大时效果很好，但只要地图小于视口高度，我想将整个东西“对齐”到容器的底部，所以地图永远不会离开底部容器。因为是山，所以很明显。

我通过向 maxBounds 添加偏移量来实现这一点，如您在本示例中所见（蓝色框 = 最大边界）：

https://jsfiddle.net/exophunk/05cq3rzt/

这种方法的问题是，您现在可以在放大时平移到“空旷的天空”，而我实际上希望保持第一个示例中的 maxBounds，因此它也限制了向上移动。

我认为这意味着我可能需要在放大时调整最大边界的大小？但是在那里，我弄乱了坐标系统和容器，无法正确执行此操作。

如果可能，我如何确保地图始终贴在容器底部，同时保持原始最大边界？

Answer 1

您可以覆盖默认的滚轮缩放并检查缩放鼠标点是否在边界内，否则缩放到边界/地图的中心：

map.scrollWheelZoom._performZoomOrg = map.scrollWheelZoom._performZoom;
map.scrollWheelZoom._performZoom = function(e){
     var mouse = map.scrollWheelZoom._lastMousePos;
     var llpixel = map.containerPointToLatLng(mouse)
     if(!bounds.contains(llpixel)){
        map.scrollWheelZoom._lastMousePos = map.unproject([container.clientWidth/2,  mapHeight]);
     }
     map.scrollWheelZoom._performZoomOrg();
}

https://jsfiddle.net/falkedesign/c04ngftj/