우선 현상황을 설명드립니다.
지도와 로드뷰를 토글 방식으로 띄우는 상황에서 로드뷰의 화면 출력이 첨부파일 처럼 한쪽으로 치우치는 형태로 출력이 됩니다.
이상태에서 로드뷰화면의 마커에서 앞이나 뒤로 이동하고 , 지도(지적도)로 갔다가 다시 로드뷰로 돌아오면, 정상적으로 로드뷰가 보이네요.
.
혹시 원인을 아시는 분 계실까요?
.
혹시 원인을 아시는 분 계실까요?
내부 렌더링 사이즈와, 실제 DOM의 사이즈가 안맞아서 그런것으로 보이긴 합니다만;;
한번 로드뷰 객체에 있는
https://apis.map.kakao.com/web/documentation/#Roadview
relayout 함수를 이용해 보시기 바랍니다.
답변 감사합니다.
해당 사항을 확인 해 봤으나
저도 동일한 이유일 것으로 판단되기는 합니다.
그리고… relayout() 호출해도 차이는 없더군요.
혹시 가능하시다면, 제가 확인해볼 수 있는 URL을 알려주실 수 있으실까요?
해당 URL은 현재 접속이 되지 않습니다.
다른 방식 또는 해당 오류가 동작하는 간단한 코드를 제공해 주셔도 됩니다.
말씀하신 경우엔 보통 size관련된 이슈일 가능성이 큰데,
지도와 로드뷰가 왔다 갔다 하면서, 뷰잉이 되는 DOM의 크기가 계속 변할까요?
https://apis.map.kakao.com/web/sample/roadviewToggle/
혹시 이 샘플과 같은 방식으로 띄우고 계실까요?
외부보안건으로 잠가놧던걸 깜빡했습니다. 지금은 풀어놨습니다
코드는 샘플과는 살작 다릅니다만 … 큰 차이는 없습니다…
올려주신 페이지를 확인하였습니다.
제가 처음에 말씀드린대로, 내부에서 렌더링 되는 사이즈와, 실제 뷰 사이즈(DOM 사이즈)가 안맞아서 발생한 이슈입니다.
우선, 처음에 지도뷰일때, 로드뷰가 들어있는 rvWrapper가 display:none 처리가 됩니다.
이는 브라우저의 렌더트리에서 아예 빠져버린다는 것으로, 이렇게 될경우 DOM노드(여기서는 rvWrapper및 그 하위 DOM노드)의 크기나 위치정보 이러한 정보를 얻을 수가 없습니다.
이러한 상황에서 로드뷰API는 최소사이즈인 300으로 렌더링을 시작합니다.
이후 로드뷰 화면이 뜬 상태에서 relayout(로드뷰 객체의 relayout()함수)을 호출하게 되면, 로드뷰가 렌더링 되어 있는 DOM노드의 width.height정보를 가져와서 새로 렌더링 하게 됩니다.
relayout을 호출했는데 차이가 없다면, 높은 확률로 타이밍 문제일 수 있습니다.
화면에서 "로드뷰"버튼을 클릭한 후, rvWrapper가 display:none이 사라지고 난후, roadview 객체에 relayout호출해야하는데, 이게 타이밍상 반대로 실행된다거나, 거의 동시에 실행되는 경우, 제대로 사이즈를 못가져오는 이슈가 있습니다.
이 타이밍을 정확히 잡을 수 없다면, 강제로 setTimeout과 같은 타이밍함수를 통해 150ms나 100ms 정도 늦게 실행을 해보시기 바랍니다.
추가로, 저희가 제공하는 샘플에서 지도와 로드뷰를 같이 띄우는 샘플은, 지도가 그려지는 노드와, 로드뷰가 그려지는 노드를 display:none처리를 하지 않습니다. z-index만 이용해서 서로 위치만 바꿉니다.
참고해 보시기 바랍니다.
그리고 올려주신 페이지가 외부노출이 금지된 페이지라면 다시 막으셔도 됩니다.
감사합니다. 예기하신대로 z-index로 처리하니 정상적으로 동작합니다.
앞으로도 이런 부분을 기억해 뒀다가 유용하게 써먹도록 하겠습니다.
감사합니다.
1개의 좋아요