전단지 : 동적 div 컨테이너

전단지를 사용하여 작은 예제를 만들고 내 웹 응용 프로그램에서 사용하려고하지만 일부 어려움이 있습니다. 전단지 : 동적 div 컨테이너

나는 이미 정적지도 사업부를 가지고 몇 객체 ( marker, circle 및 polygon)를 오버레이 그 페이지의 quick start guide에서 독립 리플릿 예를했다. 그러나 내 응용 프로그램에서지도 div 컨테이너는 jquery로 동적으로 배치되고 크기가 지정되며, 꽤 복잡한 응용 프로그램이므로 전체 코드를 게시 할 수 없습니다.

문제는 div가 올바르게 처리 된 후에지도가 div에 올바르게 그려지지만 오버레이 레이어에서는 만 볼 수 있다는 점입니다. circle 및 polygon은 볼 수 없습니다.

var map = L.map(this.$el.attr('id')).setView([51.505, -0.09], 13); 
    L.tileLayer('http://{s}.tile.cloudmade.com/<APIKEY>/997/256/{z}/{x}/{y}.png', { 
     attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>', 
     maxZoom: 18 
    }).addTo(map); 

    var circle = L.circle([51.508, -0.11], 500, { 
     color: 'red', 
     fillColor: '#f03', 
     fillOpacity: 0.5 
    }).addTo(map); 

    var polygon = L.polygon([ 
     [51.509, -0.08], 
     [51.503, -0.06], 
     [51.51, -0.047] 
    ]).addTo(map); 

    var marker = L.marker([51.5, -0.09]).addTo(map); 
    marker.bindPopup("<b>Hello world!</b><br>I am a popup."); 
    circle.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

가 나는지도 및 객체와 심지어 사업부의 전체 크기를 조절 한 후에 map.invalidateSize() 전화를 만드는 방법에 아무 문제가 없다 생각합니다. 그리고 흥미로운 부분은 팝업이 올바른 위치에 표시되지만 그 뒤에는 원이 표시되지 않는다는 것입니다.

div 컨테이너의 크기를 조정하고 위치를 지정하는 방식에 문제가있을 수 있습니다. div 컨테이너에서 사용해야하는 특정 CSS 속성이 있습니까?

모든 도움에 감사드립니다.

출처

2012-08-09 ffleandro

이 문제에 대해 잠시 생각한 후에 문제를 재현하기 위해 JSFiddle 예제를 만들려고했습니다. 그러나 아무리 노력해도 단순한 독립 실행 형 예제에서는 문제를 복제 할 수 없었으므로 문제는 내 응용 프로그램 내에서 충돌해야했습니다.

모든 증상은 CSS 문제를 지적했지만, 내 CSS의 범위가 잘 지정되었습니다. 나의 마지막 이론은 내가 사용하고있는 도서관에서 충돌이 있어야한다는 것이 었습니다.

올바른 것으로 판명되었습니다. 문제는 라이브러리 NVD3

의 CSS 스타일 시트에서 충돌이 발생했습니다.

출처

2012-08-10 13:10:10 ffleandro

전단지 : 동적 div 컨테이너

답변

관련 문제