Leaflet 缩放以适合地图框或传单中的所有标记

如何设置视图以在地图框或单张中查看地图上的所有标记？就像谷歌地图API对

边界所做的那样

例如：

var-latlngbounds=new google.maps.latlngbounds（）；
对于（变量i=0；i

---

有关更多信息，请参阅。

传单还提供了LatLngBounds，甚至还具有扩展功能，就像谷歌地图一样

因此，您可以简单地使用：

var latlngbounds = new L.latLngBounds();

---

其余的完全一样。

出于某些原因，“答案”不适用于我。这就是我最后要做的：

////var group = new L.featureGroup(markerArray);//getting 'getBounds() not a function error.
////map.fitBounds(group.getBounds());
var bounds = L.latLngBounds(markerArray);
map.fitBounds(bounds);//works!

对于传单，我使用

    map.setView(markersLayer.getBounds().getCenter());

---

您还可以定位FeatureGroup或所有FeatureGroup中的所有要素， 看看它是怎么工作的

//Group1
m1=L.标记（[7.11，-70.11]）；
m2=L.标记（[7.33，-70.33]）；
m3=L.标记（[7.55，-70.55]）；
fg1=L.特征组（[m1，m2，m3]）；
//第2组
m4=L.标记（[3.11，-75.11]）；
m5=L.标记（[3.33，-75.33]）；
m6=L.标记（[3.55，-75.55]）；
fg2=L.特征组（[m4，m5，m6]）；
//底图
baseLayer=L.tileLayer（'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'）；
var map=L.map（'map'{
中间：[3，-70]，
缩放：4，
层：[基本层，fg1，fg2]
});
//找到第1组
函数LocateOne（）{
定位所有特征（地图，fg1）；
}
函数LocateAll（）{
定位所有特征（地图[fg1，fg2]）；
}
//找到特征
功能定位所有功能（iobMap、iobFeatureGroup）{
if（Array.isArray（iobFeatureGroup））{
var obBounds=L.latLngBounds（）；
对于（变量i=0；i

.mymap{
高度：300px；
宽度：100%；
}

找到第1组
找到所有

最好的方法是使用下一个代码

var group = new L.featureGroup([marker1, marker2, marker3]);

map.fitBounds(group.getBounds());

---

为了只适合可见标记，我使用了这个方法

fitMapBounds() {
    // Get all visible Markers
    const visibleMarkers = [];
    this.map.eachLayer(function (layer) {
        if (layer instanceof L.Marker) {
            visibleMarkers.push(layer);
        }
    });

    // Ensure there's at least one visible Marker
    if (visibleMarkers.length > 0) {

        // Create bounds from first Marker then extend it with the rest
        const markersBounds = L.latLngBounds([visibleMarkers[0].getLatLng()]);
        visibleMarkers.forEach((marker) => {
            markersBounds.extend(marker.getLatLng());
        });

        // Fit the map with the visible markers bounds
        this.map.flyToBounds(markersBounds, {
            padding: L.point(36, 36), animate: true,
        });
    }
}

---

您有一个L.标记数组：

let markers = [marker1, marker2, marker3]

let latlngs = markers.map(marker => marker.getLatLng())

let latlngBounds = L.latLngBounds(latlngs)

map.fitBounds(latlngBounds)
// OR with a smooth animation
// map.flyToBounds(latlngBounds)

---

这个解决方案的问题是，它有时会切断一个向北的标记，因为标记超出了其坐标给出的边界。from@user317946:“map.fitBounds（markers.getBounds（）.pad（0.5））；现在图标不会切断。：-”我很高兴在重新发明轮子之前用谷歌搜索了这个。谢谢，以防这对任何人都不明显。。。可以获得大多数传单对象的边界。map.fitBounds（circle.getBounds（））；例如，如果要按给定的百分比扩展边界，可以使用

markers.getBounds（）.pad（）

，但也可以将padding选项传递给fitbunds，以便以像素为单位设置填充

markers.getBounds（），{padding:L.point（20,20）}）

谢谢！对于我来说，根据上面的答案，解决方案是返回“getBounds（）不是函数”。所以我根据你的建议修改了代码。我在自己的答案中有它。它在没有addTo（map）的情况下工作：map.fitBounds（L.featureGroup（markerary.getBounds（））；这会有什么不同吗？尝试执行此操作但出现错误：

LngLatLike

参数必须指定为LngLat实例、对象{lng:、lat:}或[，]的数组。有什么想法吗？也有类似的答案。这是我在Chrome中使用单个标记的唯一解决方案

var group = new L.featureGroup([marker1, marker2, marker3]);

map.fitBounds(group.getBounds());

fitMapBounds() {
    // Get all visible Markers
    const visibleMarkers = [];
    this.map.eachLayer(function (layer) {
        if (layer instanceof L.Marker) {
            visibleMarkers.push(layer);
        }
    });

    // Ensure there's at least one visible Marker
    if (visibleMarkers.length > 0) {

        // Create bounds from first Marker then extend it with the rest
        const markersBounds = L.latLngBounds([visibleMarkers[0].getLatLng()]);
        visibleMarkers.forEach((marker) => {
            markersBounds.extend(marker.getLatLng());
        });

        // Fit the map with the visible markers bounds
        this.map.flyToBounds(markersBounds, {
            padding: L.point(36, 36), animate: true,
        });
    }
}

let markers = [marker1, marker2, marker3]

let latlngs = markers.map(marker => marker.getLatLng())

let latlngBounds = L.latLngBounds(latlngs)

map.fitBounds(latlngBounds)
// OR with a smooth animation
// map.flyToBounds(latlngBounds)