카카오맵이 로드가 되지 않습니다

2
안녕하세요? 오류에 대해 질문드리고자 글을 올립니다.
평소에는 페이지가 잘 로딩되지만, 10번중 1~4번정도 부분적으로만 로드가되며, 지도는 로드가 되지 않습니다.
때때로 이렇게 오류가 나지도 않고, 맵도 로드하지 못하여 질문드립니다.

  1. 왜 이런오류가 나는지
  2. 혹시라도, 해결방안이 있을지 알 수 있을까요?

다른 글도 올렸는데, 비슷하지만 독립적인 문제인것 같아 따로 글을 올렸습니다.
혹시몰라 이 로그도 남깁니다.
오류가 날 때는 NaN이 뜨면서, 아래 페이지처럼 오류가 납니다.
링크로 이동 -> 카카오맵 오류에 대해 질문드립니다

창 크기를 조절하면 지도가 다시 그려집니다…
(위의 링크와 같은 오류가 발생했을때는 창을 조절해도 지도가 다시 그려지지 않습니다.)
어떤 해결책이 있을까요?

먼저 지도의 로드 문제를 해결한 다음 polygon 오류를 잡아야 될 것 같습니다.

지도 창 크기를 변경할 때 다시 그려지는 것은
resize 이벤트 발생 시 map.relayout()을 호출하기 때문인데요.

지도 객체 선언하기 전에 디버깅을 해서 div 스타일이 잘 들어가 있는지 확인 부탁드리고,
지도가 모달 창이나 탭으로 띄어지는 구조이거나 disply: none; → disply: block; 으로 변하는 구조라면
지도가 보이는 시점에 relayout()을 호출해야 합니다.

유사 질문에 대한 이전 답변들도 참고해주세요.
https://devtalk.kakao.com/t/topic/67269/2
https://devtalk.kakao.com/t/topic/47622/2
https://devtalk.kakao.com/t/topic/44357/4
https://devtalk.kakao.com/t/kakao-map-api/103167/2

1개의 좋아요

리액트를 사용하는데, 먼저 지도의 중심좌표를 클라우드에서 불러서 맵을 로드합니다.
클라우드에서 불러올 때, 가끔씩 중심좌표가 undefined가 되었을때 렌더링함을 확인하였습니다.
렌더링하는 타이밍이 정말 미묘하게 늦을때가 있었던 모양입니다.
그래서 랜덤하게 맵 로드가 안되었던 것 같습니다.

또한 지도가 조금만 나오는 문제도 말씀해주신 map. relayout() 함수로 해결하였습니다.
이제 지도가 로드되지 않는 현상은 해결되었습니다.
이 문제가 사라지니, NaN문제도 사라졌습니다. 감사합니다!!

1개의 좋아요

그런데 한자기 문제가 생겼습니다.
지도가 조금만 나올 때, 다시그리도록 relayout()을 사용하여 지도를 그리면, 지도의 위치가 달라지는 때가 있습니다.
맵 위치가 달라질 이유는 별로 없다고 생각하는데…
다른 글들을 보면서 추측되는 것은, CSS때문에 맵 위치가 달라지는것인지, 아니면
제가 모르는 창크기변경이 있는것인지 확인중에 있습니다.

1개의 좋아요

답변으로 드린 첫 번째 링크 확인해보시면
크기가 변경되었기 때문에 위치도 다시 설정해야 합니다.

이전 지도의 중심과 레벨 값을 갖고 있다가
relayout 호출 후 지도 중심을 재설정해주세요.

1개의 좋아요

크기를 변경하는 부분이 없다고 생각하는데, 맵 로드중에 그냥 크기가 변경될 수도 있나요?
항상 그러면 무언가 문제가 있겠거니 하겠는데
10번 리프레쉬하면 1~2번정도만 그렇게 재현되니 수정하기가 참 난해하네요.

크기를 변경하는 부분이 없다는 게 어떤 말씀이신가요?
지도의 크기가 변경돼서 relayout()을 호출한 게 아닌가요?

아직 로드 관련 문제가 완전히 해결되어 보이지 않습니다.
지도를 생성하는 시점 문제 같아 보이기도 하는데요.
지도를 로드하는 시점에 dom객체가 잘 생성되었는지, 스타일이 들어가 있는지 확인해보시고,
react로 개발 중이라면 아래 링크도 함께 확인해주세요.
https://devtalk.kakao.com/t/react-api/43110
https://devtalk.kakao.com/t/react-router-redux/52344

1개의 좋아요

lea.ju님의 말이 맞는것 같습니다.
지도가 생성될때 뭔가 문제가 있는 것 같습니다.
감사합니다…ㅠㅠ 이렇게 적극적으로 문제해결에 도움을 주시다니 감동이에요.
잘 해결해보겠습니다.

1개의 좋아요

결국 두번째 해결방안인 setTimeout() 메서드로 지연시간을 주었습니다.
클라우드 데이터 통신이 늦을때도 있기 때문인지
아니면 로드하는데 오래걸려서 그런지
500ms나 줘야 완전히 버그가 없어졌습니다.
차차 줄여가야겠습니다. 감사합니다.

안녕하세요.
몆일째 지도를 load못하고 있는데 맵 로드 부분만 리엑트 코드 공유해주실수 있나요?
보여주신다면 너무 감사하겠습니다…

1개의 좋아요

제 노트북에서는 랜더링 해준 좌표만큼주고 맴도 잘뜨고 오버레이도 잘뜹니다 근데 다른 사람 노트북에서 저의코드를 그대로 복사한후 실행 시켜는데 뭔가 랜더링이 잘 안불러져오는 상황 같이 위쪽에 만 지도 가뜨고 나머지 부분들은 짤려서 나옵니다 창을 늘리니까 맵이 나오긴하는데 랜더링한 좌표값 정확하게 안뜨고 다른곳에 랜더링이 되어있는 상황이 나옵니다 혹시 이런 오류 아시는지 ㅠㅠ