다음지도 중심 표시
본문
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs_open
이 소스로 탭을 사용하려고 하는데,
iframe으로 삽입한 똑같은 지도가
첫번째 탭 (defaultOpen) 에서는 지도영역 중앙에 중심이 위치해서 잘 표시가 되는데,
두번째 탭에서는 중심이 좌상단으로 이동되어서 나타납니다.
두번째탭을 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>
정말 감사합니다. ^^
답변을 작성하시기 전에 로그인 해주세요.