안녕하세요.
jquery mobile + Daum map를 이용하여 페이지를 만들고 있었습니다.
하나의 apsx파일에서 jquery mobile의 페이지(data-role=“page”)를 이용하여 지도페이지를 만들었습니다.
그리고 해당 페이지로 이동할때 지도를 띄우도록 하였으나 다음의 이미지와 같아 위치가 비정상적으로 보이는 문제가 있습니다.
구글링을 해보고 찾아본 결과 setTimeout를 이용하라 하여 적용을 해봤으나 별다른 차이가 없어서 문의를 드리려 합니다.
다음은 html코드와 js코드 입니다
- html코드
HTML코드
<div data-role="page" id="map_page">
<div data-role="header" data-position="fixed" style="overflow: hidden;" data-tap-toggle="false">
<div data-role="app-header" class="app-header" data-position="fixed" data-tap-toggle="false"></div>
</div>
<div role="main" class="ui-content" style="padding:0 0 0 0; height:100%">
<div class="ui-bar ui-bar-a">
</h3><h3>지도</h3>
</div>
<div class="ui-body ui-body-a" style="padding:0.2em;min-height:500px;">
<div class="map_wrap" id="Map_Wraper">
<div id="map" style="width:100%;height:95%;position:absolute;overflow:hidden;"></div>
<div class="custom_zoomcontrol radius_border">
</div>
</div>
</div>
</div>
<div style="overflow: hidden;" data-role="footer" data-position="fixed" data-iconpos="left" data-tap-toggle="false">
<div data-role="navbar">
</div>
</div>
</div>
- js코드
setTimeout(function () {
//지도 설정
var mapContainer = document.getElementById("map"), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(accountLAT, accountLONG), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
bounds = new daum.maps.LatLngBounds();//위치정보를 가지고 있을 LatLngBounds 객체 생성
}, 1000);
혹시 원인과 해결책을 아시는분은 답변을 부탁 드립니다.