전단지 :지도 invalidatesize 작동하지 않습니다

Question

나는 밤새도록 노력해 왔습니다. 제발 Google에 가지 말아주세요. 나는 모든 중복 질문, 내가 찾을 수있는 모든 전단지 문서를 읽었으며 왜 이것이 작동하지 않는지 알 수 없다. 필자는 새로운 Mapquest 타일로 바꿔야 만했습니다. 모든 타일이로드 될 때마다 타일이 한 모퉁이 만 남았습니다. 대답은 크기를 무효화하는지도라는 것을 알고 있습니다. 그것이 이전에 효과가 있었고, 오늘 밤 읽은 모든 기사와 질문/답변이 대답이라고 말합니다. 나는 명백한 것을 놓치고있다. 도와주세요.

<script> 
$('#locModal').on('show.bs.modal', function (event) { 

    var button = $(event.relatedTarget); 
    var mapinfo = button.data('whatever'); 
    var pos = mapinfo.position; 
    var lat = pos.substring(0,7); 
    var ling = pos.substring (10,17); 
    var map = L.map('mapdiv').setView([lat, ling], 6) 
    var name = mapinfo.name; 
    var contact = mapinfo.contact; 
    var address = mapinfo.address; 
    var city = mapinfo.city; 
    var state = mapinfo.state; 
    var zip = mapinfo.zip; 
    var phone = mapinfo.phone; 
    var p1 = phone.substring(0,3); 
    var p2 = phone.substring(3,6); 
    var p3 = phone.substring(6,10); 

if (map != undefined) { map.remove(); } 

window.setTimeout(function() { 
    map.invalidateSize(); 
}, 1000);  

var basemap = L.map('mapdiv', { 
    layers: MQ.mapLayer(), 
    center: [ lat, ling ], 
    zoom: 12, 
    }); 

L.marker([lat, ling]).addTo(map); 

$("#mapModalHeader").html("<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>X</button><h2>" + "Map to " + name + "</h2>"); 


$("#mapModalFooter").html("Mailing Address: " + contact + " " + address + " " + city + ", " + state + " " + zip 
    + " " + "(" + p1 + ") " + p2 + "-" + p3); 

$('body').on('hidden.bs.modal', '.modal', function() { 
    document.location.reload(); 
}); 
}); 
</script> 

나는이 같은지도 invalidateSize void 다음을 시도했다 : :

(function() { 
    map.invalidateSize(); 
}, 1000); 

내 라이브 웹 사이트의 핵심 기능이 고장 나는 당신이 내게 줄 수있는 도움을 사용하시기 바랍니다 수 여기 내 스크립트입니다.

Answer 1

정말 당신이 달성하려고 무엇을 혼란 ...

먼저 당신은 당신이 1 초 시간 제한 후 크기를 업데이트하려고, 당신은 map.remove()과 그것을 파괴, var map = L.map('mapdiv').setView([lat, ling], 6)와지도를 시작, 그리고 마지막으로 당신은 초기화 지도를 다시 작성하지만 다른 변수에 참조를 유지하십시오. var basemap = L.map('mapdiv'

따라서이 첫 번째 실수는 아마도 이상한 명령 연속 일 것입니다. 는 HTML 요소로 만들어집니다 당신은 즉시 div지도 컨테이너로 (#mapdiv 귀하의 경우)지도를 초기화 할 수 있습니다

• :

  그런 다음, 당신은 당신의 코드를 단순화 할 수있다. 표시되거나 DOM에 첨부 될 필요가 없습니다.

• 지도 컨테이너 크기가 변경되는 즉시 invalidateSize()을 사용할 수 있습니다. 귀하의 경우에는 "shown.bs.modal" event의 콜백 (직접 사용한 이벤트와의 차이점 : "shown" v.s. "show")에 직접 문의하십시오.
• 모달이 열릴 때마다 다른 위치에 마커를 표시해야하는 경우 맵을 삭제하고 다시 만들 필요가 없습니다. 마커에 대한 전역 참조를 유지하고 제거한 다음 새 위치에 마커를 추가하십시오.