传单地图不适合边界

Question

我正在尝试将地图拟合到由 2D 数组定义的边界。Error: Bounds are not valid. leaflet.js:5:21909即使标记已添加到地图并且是有效的坐标，我仍然收到错误消息。

var map = L.map('map', { zoomControl:false });
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);



map.setView([0, 0], 2);

var markers = new L.FeatureGroup();
map.addLayer(markers);


function drawResults(){
    // get offer keys
    var offers = new Array();
    var articles = [];


    offersRef.once("value", function(snapshot) {        
        var offerKeys = Object.keys(snapshot.val());
        for (var i=0; i<offerKeys.length; i++){
            var offer = snapshot.val()[offerKeys[i]];           
            var lat = offer.lat;                
            var lng = offer.lng;
            console.log(lat);// outputs 33.2321
            console.log(lng);// outputs 101.1234
            offers.push([lat, lng]);
            var marker = L.marker([lat, lng]).addTo(markers);
        }

    });
    map.fitBounds(markers.getBounds());

    }
    console.log(offers);    

}

drawResults();

谁能看到我做错了什么？

编辑：控制台日志

35.0721909  app.js:350:13
-106.48798399999998  app.js:351:13
35.0526641  app.js:350:13
-78.87835849999999  app.js:351:13

Answer 1

您需要将调用移至map.fitBounds回调中，因为该once方法（看起来像 Firebase API 调用）可能是异步的：

offersRef.once("value", function(snapshot) {
    var offerKeys = Object.keys(snapshot.val());
    for (var i = 0; i < offerKeys.length; i++) {
        var offer = snapshot.val()[offerKeys[i]];
        var lat = offer.lat;
        var lng = offer.lng;
        offers.push([lat, lng]);
        var marker = L.marker([lat, lng]).addTo(markers);
    }
    map.fitBounds(markers.getBounds());
});

如果在回调之外调用它，则功能组中不会有任何标记，并且该组的边界将无效。