Leaflet.js 将地图集中在一组标记上

Posted 2023-02-16

【中文标题】Leaflet.js 将地图集中在一组标记上

【英文标题】：Leaflet.js center the map on a group of markers

【发布时间】：2013-06-21 02:10:06

【问题描述】：

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

我知道谷歌地图有自动居中功能，但我将如何使用 Leaflet.js 来解决这个问题？

【参考方案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() 以增加现有边界的大小。使用这两个选项中的任何一个，您都不应该自己手动增加边界大小的大于/小于检查。

优秀的答案，感谢您跟进评论问题，因为解释有助于更好地理解功能（即使是 3 年后）

@redfox05 甚至 7 年后：D