안녕하세요 현재 로드뷰 기능을 넣어보고 있는데요. 동동이를 좀 써보려는데, 이상하게 지도가 위처럼 완전히 표시가 안되네요…
<div id="roadview_mapWrapper" style="width:50%;height:500px;float:left">
<div id="roadview_map" style="width:100%;height:100%;"></div> <!-- 로드뷰 지도를 표시할 div 입니다 -->
</div>
<div id="rvWrapper" style="width:50%;height:500px;float:left">
<div id="daum_roadview" style="width:100%;height:100%;"></div> <!-- 로드뷰를 표시할 div 입니다 -->
</div>
</div>
현재 modal pane 안에서 동동이를 위한 지도와 로드뷰를 나누어서 표시를 하는 중이에요. 지도를 잡아땡겨도 안나오다가 인터넷 창 사이즈를 조금만 줄이거나 늘리면 갑자기 지도가 뿅하고 생겨나네요. 무슨 일 일까요?
지도 영역이 변경되는 로직이 있다면
영역이 변경되고 나서 map.relayout()을 호출해주세요.
관련 예제가 아래에 있습니다. 참고해주세요.
http://apis.map.daum.net/web/sample/roadviewWithMapButton/
지도 영역이 변경되는 로직은 없습니다. map.relayout() 을 호출해도 같은 현상이네요
부트스트랩 모달이라 동적으로 변경되서 그런 것 같았는데, 그래도 해결이 안되네요.
으음…
모달 뷰라면 지도가 뜨는 영역이 보이지 않다가
보이게 되는데 이 경우에 저런 현상이 생깁니다.
사용자가 외부에서 영역을 변경하게 되면 그걸 API 내부에서 알수 없기 때문에
지도 표시 영역이 완전히 스타일이 잡히고 난 이후에 map.relayout()을 호출하는 것입니다.
relayout을 모달이 모두 뜬 이후에 호출하도록 변경 해보세요.
같은문제로 찾다가 여기까지왔습니다
map.relayout() 작업을 같은 function 내에서 지도 그린 후 바로 호출해줬더니 적용안돼
setTimeout(function(){ map.relayout(); }, 0);
으로 setTimeout 걸어서 비동기처리해줬더니 작동하네요
참고하시라고 답글달아놓습니다!
3개의 좋아요
고맙습니다. 저도 이문제로 해매고 있었는데…
저 같은 경우엔 delay 를 조금 줬습니다. 1000 ms 정도 필요하더라구요.
1개의 좋아요
저는 replyout 은 사용하지 않고 부트스트랩의 event 속성을 사용해서 해결했습니다.
$("#myModal").on(‘shown.bs.modal’, function() {
// id 속성값이 myModal인 element 에 지도를 표시하는 로직
})
위 코드에서 shown.bs.modal 은 사용자에 의해 모달창이 표시됐을 때 를 의미할 겁니다… 아마…
즉, id가 myModal 인 모달창이 사용자에 의해 화면에 표시되고나서, 익명함수의 지도를 표시하는 로직을 수행하도록 했습니다.
※참고
https://getbootstrap.com/docs/4.3/components/modal/#events
3개의 좋아요
약 3년 정도 지났는데 같은 현상으로 고생하다가 여기까지 왔습니다…
이 댓글 보고 덕분에 저도 해결할 수 있었습니다 ㅠㅠㅠ 너무 감사합니다!
