执行fitBounds（）后，地图上的getbounds（）错误

Question

我正在尝试弄清为什么 LeafletJS 在执行 fitBounds（）时拒绝更新地图的边界。请参见下面的示例：

window.VARS = {
  lat: "44.849666595459",
  lng: "-0.45023700594902"
};
the_markers = [
{ latitude: "43.5587495722976360", longitude: "2.91172027587890620" },
{ latitude: "42.447154030597420", longitude: "3.1617611646652220" },
{ latitude: "42.934817491341060", longitude: "2.2226071357727050" },
{ latitude: "43.942591406202790", longitude: "4.5511722564697270" },
{ latitude: "43.971010439915080", longitude: "3.53219582705082760" },
{ latitude: "43.791295604602740", longitude: "4.244724512100220" },
{ latitude: "44.06685920", longitude: "4.7537072999999740" },
{ latitude: "42.93469966783150", longitude: "2.22310066223144530" },
{ latitude: "43.468867614829250", longitude: "2.6916503906250" },
{ latitude: "43.38313951013020", longitude: "1.89306401852422820" },
{ latitude: "43.2689484490373960", longitude: "2.5141417980194090" },
{ latitude: "42.9351204832447950", longitude: "2.22281125026245260" },
{ latitude: "44.0415390", longitude: "3.737170" },
{ latitude: "43.461446687325310", longitude: "3.4211683273315430" },
{ latitude: "43.103510", longitude: "2.091930" },
{ latitude: "42.9912035311160140", longitude: "2.9541689157485960" },
{ latitude: "43.37033920", longitude: "2.2828302000000350" }
];

window.VARS.Map_Modal = L.map('google_map_modal_inner', {
              center: [window.VARS.lat,window.VARS.lng],
              zoom: 10,
              maxZoom: 20,
              zoomControl: false
            });

new L.Control.Zoom({ position: 'topright' }).addTo(window.VARS.Map_Modal);

setTimeout(function() {

    window.VARS.Map_Modal.invalidateSize();// stop the grey tiles due to being a flex div

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox.streets',
        accessToken: 'pk.eyJ1IjoiYW5keW5ld2J5IiwiYSI6ImNqbjRmY3htNzAzNTUzeGxwdnFza3k2bmIifQ.DDUWhS_xib2LSIcSd3FMZg'
    }).addTo(window.VARS.Map_Modal);
}, 500);

window.VARS.markerCluster = L.markerClusterGroup();

    the_markers.forEach(function(item, i){

            window.VARS.markerCluster.addLayer(
                    L.marker([item.latitude, item.longitude])
                    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
                    .on("click", function(marker) {
                        console.dir(marker);
                    })
            );
    });

    // add the clusters to map
    window.VARS.Map_Modal.addLayer(window.VARS.markerCluster);

    // fit to map
   // HERE IS WHERE THE ERROR HAPPENS
    window.VARS.Map_Modal.fitBounds(window.VARS.markerCluster.getBounds());



    var mapBounds = window.VARS.Map_Modal.getBounds();

    var rect = L.rectangle(mapBounds, {color: 'blue', weight: 1}).addTo(window.VARS.Map_Modal);

您可以在这里看到一个小提琴：

https://jsfiddle.net/youradds/3ugk7L9y/42/

如果缩小，可以看到 getBounds（）返回的位置（突出显示的矩形）；

我需要怎么做才能使其获得新的界限？

谢谢

Answer 1

嗯，原来我很笨！

而不是：

var mapBounds = window.VARS.Map_Modal.getBounds();

我需要了解集群本身的界限！

var mapBounds = window.VARS.markerCluster.getBounds();