다음지도 중심 표시

다음지도 중심 표시

QA

다음지도 중심 표시

답변 1

본문

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs_open

이 소스로 탭을 사용하려고 하는데,

 

iframe으로 삽입한 똑같은 지도가

첫번째 탭 (defaultOpen) 에서는 지도영역 중앙에 중심이 위치해서 잘 표시가 되는데,

두번째 탭에서는 중심이 좌상단으로 이동되어서 나타납니다. 

https://bohyunkr.cafe24.com/

 

두번째탭을 default 로 설정하면 두번째가 잘 나오고 첫번째가 중심이 좌상단으로 나오는데,

지도소스는 아무리 손대봐도 안되고. ㅠ 조언부탁드립니다.

 

감사합니다. ^^;;

 

 

이 질문에 댓글 쓰기 :

답변 1

이렇게 해보세요.

미리 지도를 로딩하지 마시고

각 탭을 클릭할때마다 로딩되도록 하시면 될 듯 합니다.

이유는 모르고... 걍 경험이고...

콘솔에서 테스트 해보니 가운데 잘 뜨네요.

 

 

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p><iframe id="londonIFrame" width="1080px" height="600px" src="" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe></p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p><iframeid="parisIFrame" width="1080px" height="600px" src="" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe></p> 
</div>

<script>

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
    document.getElementById("londonIFrame").src = "https://bori0806.cafe24.com/map/wine365_map1.php"; 
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
    document.getElementById("parisIFrame").src = "https://bori0806.cafe24.com/map/wine365_map1.php"; 
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

//최초 화면 로딩시 로딩  (안해도 될려나? 이건 안뜨면 적용하세요.)
document.getElementById("londonIFrame").src = "https://bori0806.cafe24.com/map/wine365_map1.php"; 
</script>

 
 
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 38
© SIRSOFT
현재 페이지 제일 처음으로