Openstreet map은 길이가 증가 할 때 공백 부분을 표시합니다.

Question

원래 크기가 970/256 (너비/높이) 인 웹 페이지에 openstreet지도를 표시합니다. 그것은 잘 작동합니다. 페이지에 버튼을 추가했습니다. 사용자가이 버튼을 누르면지도 폭은 페이지의 전체 폭에 걸쳐 증가합니다.

$(function() { 
      $("#hide").click(function() { 
       if($(this).attr("value") == "Hide") 
       { 
        document.getElementById('hide').value="Show"; 
        $("#hide").html('Show'); 
        $('#tabs').hide(); 

        var pos; 
        pos = $("#map").offset(); 
        $("#map").animate({ 
         left: "-" + (pos.left-50) + "px", 
        }); 

        $("#map").width(1350); 
       } 
       else{ 
        document.getElementById('hide').value="Hide"; 
        $("#hide").html('Hide'); 
        $('#tabs').show('fast'); 

        var pos; 
        pos = $("#map").offset(); 
        $("#map").animate({ 
         left: "+" + (pos.left+50) + "px", 
        }); 

        $("#map").width(970); 
       } 

      }); 
     }); 

하나를 :

여기

이 버튼을 클릭 할 때 트리거되는 자바 스크립트 코드 : 맵 폭 증가,지도의 우측 부분이 보인다 때 다음 이미지와 같이 그러나 났을 수 제안?

Answer 1

크기를 변경 한 후 map.invalidateSize();을 시도하십시오.

$(function() { 
    $('#hide').click(function() { 
     var button = $(this), mapStyles; 

     if(button.attr('value') === 'Hide') { 
      button.attr('value', 'Show'); 
      button.html('Show'); 
      $('#tabs').hide(); 

      pos = $('#map').offset(); 
      mapStyles = { 
       left: '-' + (pos.left - 50) + 'px', 
       width: '1350px' 
      }; 
     } else { 
      button.attr('value', 'Hide'); 
      button.html('Hide'); 
      $('#tabs').show('fast'); 

      pos = $('#map').offset(); 
      mapStyles = { 
       left: '+' + (pos.left + 50) + 'px', 
       width: '970px' 
      }; 
     } 

     $('#map').animate(mapStyles, function() { 
      // there are you must have map varable witch retirned by L.Map() 
      map.invalidateSize(); 
     }); 
    }); 
}); 

PS

• 나은 사용 JQuery와 다른 대신 attrval위한 입력 방법 및 data.
• #hide 요소는 이미 this입니다.
• 다른 qoutes를 섞지 않으면 코드가 더 멋지게 보입니다.