리플릿 맵이 경계에 맞지 않습니다.

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

출처

2017-01-09 David J.

왜 '그룹'이 필요합니까? 'map.fitBounds (markers.getBounds())'가 될 수 없습니까? '마커 '자체는'FeatureGroup '입니다. – cartant

@cartant 당신 말이 맞아요. 원래 그걸 가지고 있었고 제게 똑같은 오류를 주었기 때문에 무언가를 시도하기로 결정했습니다. 무의미한 추가 기능 그룹없이 표시 할 코드 편집; 정확한 오류가 발생합니다. –

여러분의 의견은'lat'와'lng'가 특별한 값을 출력한다고합니다. 얼마나 많은 포인트가 있습니까? 둘 이상일 경우, 그들은 일치합니까? 'getBounds'에 의해 반환되는 것은 무엇입니까? – cartant

당신은 (A 중포 기지 API 호출 모양) once 방법으로, 콜백으로 map.fitBounds에 전화를 이동해야 할 가능성이 비동기 :

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

콜백 외부에서 호출되는 경우 기능 그룹에 마커가 없으며 그룹의 경계가 유효하지 않습니다.

출처

2017-01-09 10:40:47 cartant

그걸 잘했습니다! 도와 주셔서 감사합니다 –

리플릿 맵이 경계에 맞지 않습니다.

답변

관련 문제