Leaflet.js将地图置于一组标记的中心

Question

即时通讯使用Leaflet.js,并希望某种方式将地图置于我所拥有的标记上,以便在页面启动时所有都在用户视图中.如果所有标记都聚集在一个小区域中,我希望地图缩小到仍然显示所有标记的水平.

我知道谷歌地图有自动中心功能,但我如何使用Leaflet.js进行此操作？

Answer 1

您可以使用L.LatLngBounds来创建要缩放的区域.

首先,创建一个边界并传递一个L.LatLngs数组:

var bounds = new L.LatLngBounds(arrayOfLatLngs);

这将创建一个边界,用于封装数组中包含的每个点.一旦有了边界,就可以拟合地图的边界以匹配您创建的边界:

 map.fitBounds(bounds);

这将尽可能地缩放地图,同时仍然包含数组中的每个点.

或者,您也可以fitBounds通过简单地调用它并传入一个L.LatLng对象数组来调用该方法.例如:

map.fitBounds([[1,1],[2,2],[3,3]]);

这将完全相同,无需创建特定L.LatLngBounds对象.

`L.LatLngBounds`有两个构造函数.其中一个就是你描述的 - 西北和东南两点.但是,第二个构造函数采用任意大小的`L.LatLngs`数组.此外,您可以调用`L.LatLngBounds.extend()`以增加现有边界的大小.使用这两个选项中的任何一个,您都不应该使用大于/小于检查来自己手动增加边界的大小. (7认同)
很好的答案，感谢您跟进评论问题，因为解释有助于更好地理解功能（即使是 3 年后） (2认同)
@redfox05 甚至 7 年后:D (2认同)