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

Question

我正在使用Leaflet.js，并且希望通过某种方式将 map 集中在我拥有的标记上，以便在页面启动时所有标记都在用户的 View 中。如果所有标记都聚集在一个小区域中，我希望 map 缩小到仍然显示所有标记的水平。

我知道谷歌地图有自动居中功能，但我该如何使用 Leaflet.js 来实现这个功能？

Answer 1

您可以使用L.LatLngBounds以创建一个可缩放的区域。

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

var bounds = new L.LatLngBounds(arrayOfLatLngs);

这将创建一个边界，该边界将封装数组中包含的每个点。获得边界后，您可以调整 map 的边界以匹配您创建的边界:

 map.fitBounds(bounds);

这会将 map 尽可能地放大，同时仍然包含数组中的每个点。

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

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

这将发挥完全相同的作用，无需创建特定的 L.LatLngBounds 对象。