[Solved]로드뷰 전환 시 일부 영역 맵이 표기되지 않습니다

지도/로컬 API
#1

이럴땐 주신 리렌더링 함수를 잘 사용합시다…

카카오 개발커뮤니티의 도움으로 이제 거의 다 했는데…

상황설명

  • 기존 DaumAPI를 활용한 웹 페이지에 로드뷰 기능과 거리재기 기능을 추가하는 것(수습수습…)
  • 거리재기 기능은 잘 안착되었지만, 현재 웹 페이지가 잘 구분이 되어 있지 않고 하나의 HTML, CSS, JS처럼 덩어리로 취급되고 있고, div들이 class로 구분되어 있는 등의 문제가 있어 선뜻 손대기가 어려웠지만 꾸역꾸역 (제일 되면 안된다는 복붙 개발자…) 하고 있었는데, 더 큰 문제를 만났습니다.
  • 로드뷰를 사용했다가 다시 복귀하면 일부 영역에 지도가 정상적으로 출력되지 않습니다.

아래와 같은 현상입니다. 버튼을 통해 모드를 토글하고 있는 예제를 따라 실행하였는데 예제만 돌릴때는 잘 되나
복붙조차도 잘 못해서 다음과 같은 현상이 발생하였습니다.
로딩

아마 지도를 그려야 되는 범위를 아직도 줄어든 영역으로 인지하는 것 같은데 사용하는 CSS 속성은 다음과 같습니다.

꾸어어엉 미치겠네… CSS 사용하는 것은 아래와 같습니다.

/* footer나 sidebar를 제외한 컨텐츠를 감싸고 있는 div*/
.content-wrapper {
    position: fixed;
    width: 100%;
    height: 100%
}

/* 지도 영역을 감싸고 있는 클래스 div*/
.map_wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
/* */
.map_wrap * {
    box-sizing: content-box;
}
/* 지도영역 div에 클래스가 추가된다면 영역을 줄인다!*/
.content-wrapper .map_wrap.view_roadview {
    height: 50%;
}
/* 실제로 그림이 그려지는 div*/
#map_canvas {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* 로드뷰 영역을 감싸안고 있는 div*/
#rvWrapper {
    width: 100%;
    height: 50%;
    top: 52%;
    right: 40px;
    position: absolute;
    z-index: 0;
}

/* 실제로 로드뷰가 렌더링 되는 div*/
#roadview {
    width: 100%;
    height: 100%;
    position: absolute;
}

/* 로드뷰 옆에 달려 있는 컨트롤러*/
#roadviewControl {
    position: absolute;
    top: 55px;
    left: 10px;
    width: 65px;
    height: 24px;
    padding: 2px;
    z-index: 1;
    background: #f7f7f7;
    border-radius: 4px;
    border: 1px solid #c8c8c8;
    box-shadow: 0px 1px #888;
    cursor: pointer;
}

어떤게 문제일까요? CSS가 꼬인건지…으어어어

사수님이 렌더링 이벤트 있을거라고 날려보라네요.
밥 먹고 오겠습니다. 그냥 물어볼껄

생각해보니 이미 들어가있네요. map.relayout()…

뭐가 문제일까

toggleOverlay 함수 밑에 넣었습니다. 잘 되네요… 역시 그냥 물어볼걸

2개의 좋아요