缩放以适合 LeafletJS 地图上的所有标记

Posted 2023-03-28

【中文标题】缩放以适合 LeafletJS 地图上的所有标记

【英文标题】：Zoom to Fit All Markers on LeafletJS Map

【发布时间】：2016-11-04 11:07:11

【问题描述】：

在 LeafletJS 地图中添加一系列标记后，是否可以让 Leaflet 缩放并重新调整焦点以显示每个标记？我看到 many similar questions 与 Google 地图有关，但与 Leaflet 无关。

类似：

map.fitAllMarkers();

我还注意到several functions in Leaflet 可以获取地图的边界，但我不确定如何使用它们来达到预期的效果。

【参考方案1】：

您还可以利用特意制作的featureGroup.getBounds() 方法使地图适合您的标记范围：

var fg = L.featureGroup([arrayOfMarkers]).addTo(map);

map.fitBounds(fg.getBounds());

演示：http://jsfiddle.net/3v7hd2vx/28/

【参考方案2】：

最后，这实际上很简单，虽然没有统一为一个功能。首先，您需要创建一个 Leaflet bounds 对象：

var bounds = new L.LatLngBounds();

然后，对于地图上的每个标记：

bounds.extend(markerObject.getLatLng());

最后，将新边界应用于地图：

mapObject.fitBounds(bounds);