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 对象。