Thu phóng để vừa với tất cả các điểm đánh dấu trong Mapbox hoặc Tờ rơi

Làm cách nào để đặt chế độ xem để xem tất cả các điểm đánh dấu trên bản đồ trong Mapbox hoặc Tờ rơi ? Giống như Google Maps API làm với bounds?

Ví dụ:

var latlngbounds = new google.maps.LatLngBounds();
for (var i = 0; i < latlng.length; i++) {
  latlngbounds.extend(latlng[i]);
}
map.fitBounds(latlngbounds);

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

map.fitBounds(group.getBounds());

Xem tài liệu để biết thêm thông tin.

'Câu trả lời' không hoạt động vì một số lý do. Vì vậy, đây là những gì tôi đã kết thúc:

////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!

var markerArray = [];
markerArray.push(L.marker([51.505, -0.09]));
...
var group = L.featureGroup(markerArray).addTo(map);
map.fitBounds(group.getBounds());

Tờ rơi cũng có LatLngBounds thậm chí có chức năng mở rộng, giống như bản đồ google.

http://leafletjs.com/reference.html#latlngbounds

Vì vậy, bạn có thể chỉ cần sử dụng:

var latlngbounds = new L.latLngBounds();

Phần còn lại hoàn toàn giống nhau.

Đối với Tờ rơi, tôi đang sử dụng

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

Bạn cũng có thể xác định vị trí tất cả các tính năng bên trong FeatureGroup hoặc tất cả các featureGroup, xem nó hoạt động như thế nào!

//Group1
m1=L.marker([7.11, -70.11]);
m2=L.marker([7.33, -70.33]);
m3=L.marker([7.55, -70.55]);
fg1=L.featureGroup([m1,m2,m3]);

//Group2
m4=L.marker([3.11, -75.11]);
m5=L.marker([3.33, -75.33]);
m6=L.marker([3.55, -75.55]);
fg2=L.featureGroup([m4,m5,m6]);

//BaseMap
baseLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var map = L.map('map', {
  center: [3, -70],
  zoom: 4,
  layers: [baseLayer, fg1, fg2]
});

//locate group 1
function LocateOne() {
    LocateAllFeatures(map, fg1);
}

function LocateAll() {
    LocateAllFeatures(map, [fg1,fg2]);
}

//Locate the features
function LocateAllFeatures(iobMap, iobFeatureGroup) {
		if(Array.isArray(iobFeatureGroup)){			
			var obBounds = L.latLngBounds();
			for (var i = 0; i < iobFeatureGroup.length; i++) {
				obBounds.extend(iobFeatureGroup[i].getBounds());
			}
			iobMap.fitBounds(obBounds);			
		} else {
			iobMap.fitBounds(iobFeatureGroup.getBounds());
		}
}

.mymap{
  height: 300px;
  width: 100%;
}

<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet"/>

<div id="map" class="mymap"></div>
<button onclick="LocateOne()">locate group 1</button>
<button onclick="LocateAll()">locate All</button>

Để chỉ phù hợp với các điểm đánh dấu hiển thị, tôi đã sử dụng phương pháp này.

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,
        });
    }
}

Cách tốt nhất là sử dụng mã tiếp theo

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

map.fitBounds(group.getBounds());