javascript - 传单 map 不适合边界

Question

我正在尝试使 map 适合二维数组定义的边界。我一直收到错误 Error: Bounds are not valid。 leaflet.js:5:21909 即使标记已添加到 map 并且是有效坐标。

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

如果在回调之外调用，则特征组中将没有任何标记，并且组的边界将无效。