javascript - Leaflet map won't fit bounds - Stack Overflow

admin管理员组

文章数量:1332359

I'm trying to fit a map to bounds defined by a 2D array. I keep getting the error Error: Bounds are not valid. leaflet.js:5:21909 even though the markers are added to the map and are valid coords.

var map = L.map('map', { zoomControl:false });
L.tileLayer('http://{s}.tile.osm/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="">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();

Can anyone see what I'm doing wrong?

Edit: Console logs

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

I'm trying to fit a map to bounds defined by a 2D array. I keep getting the error Error: Bounds are not valid. leaflet.js:5:21909 even though the markers are added to the map and are valid coords.

var map = L.map('map', { zoomControl:false });
L.tileLayer('http://{s}.tile.osm/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://openstreetmap/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();

Can anyone see what I'm doing wrong?

Edit: Console logs

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

• javascript
• leaflet

Share Improve this question Follow edited Jan 9, 2017 at 11:46 IvanSanchez 19.1k33 gold badges3737 silver badges4949 bronze badges asked Jan 9, 2017 at 5:56 David J.David J. 1,9131313 gold badges5252 silver badges100100 bronze badges 4

• 4 Why do you need group? Shouldn't it be map.fitBounds(markers.getBounds())? markers itself is a FeatureGroup. – cartant Commented Jan 9, 2017 at 6:06
• @cartant You're right -- that's how I originally had it and it was giving me the same error, so I decided to try something. Editing code to show without pointless extra featuregroup; I get the exact same error. – David J. Commented Jan 9, 2017 at 9:29
• Your ments state that lat and lng output particular values. How many points do you have? If more than one, are they coincident? What's returned by getBounds? – cartant Commented Jan 9, 2017 at 10:07
• @cartant There are two points -- just added them to my question. I thought only lines could be coincident? I don't know what it means for points to be. console.log(markers.getBounds()) doesn't print anything to the console... – David J. Commented Jan 9, 2017 at 10:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You will need to move the call to map.fitBounds into the callback, as the once method (which looks like a Firebase API call) is likely asynchronous:

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

If it's called outside the callback, there won't be any markers in the feature group and the group's bounds won't be valid.

本文标签： javascriptLeaflet map won39t fit boundsStack Overflow