안녕하세요? 오류에 대해 질문드리고자 글을 올립니다.
평소에는 페이지가 잘 로딩되지만, 10번중 1~4번정도 부분적으로만 로드가되며, 지도는 로드가 되지 않습니다 .
때때로 이렇게 오류가 나지도 않고, 맵도 로드하지 못하여 질문드립니다.
왜 이런오류가 나는지
혹시라도, 해결방안이 있을지 알 수 있을까요?
다른 글도 올렸는데, 비슷하지만 독립적인 문제인것 같아 따로 글을 올렸습니다.
혹시몰라 이 로그도 남깁니다.
오류가 날 때는 NaN이 뜨면서, 아래 페이지처럼 오류가 납니다.
링크로 이동 -> 카카오맵 오류에 대해 질문드립니다
창 크기를 조절하면 지도가 다시 그려집니다…
(위의 링크와 같은 오류가 발생했을때는 창을 조절해도 지도가 다시 그려지지 않습니다.)
어떤 해결책이 있을까요?
먼저 지도의 로드 문제를 해결한 다음 polygon 오류를 잡아야 될 것 같습니다.
지도 창 크기를 변경할 때 다시 그려지는 것은
resize 이벤트 발생 시 map.relayout()을 호출하기 때문인데요.
지도 객체 선언하기 전에 디버깅을 해서 div 스타일이 잘 들어가 있는지 확인 부탁드리고,
지도가 모달 창이나 탭으로 띄어지는 구조이거나 disply: none; -> disply: block; 으로 변하는 구조라면
지도가 보이는 시점에 relayout()을 호출해야 합니다.
유사 질문에 대한 이전 답변들도 참고해주세요.
daumapi 라는 함수를 호출하는 시점을 잘 잡으셔야 합니다. 지도는 Map 객체에 넣어주는 HTMLElement의 width, height에 따라 지도 영역을 잡으며 해당 속성값이 제대로 지정되어 있지 않았을 경우, 즉 display:none 이었다거나 block이 된다거나 동적으로 사이즈가 변경되는 경우에는 문제가 됩니다. 이 경우 map.relayout()이라는 함수를 호출하여 지도 영역이 변경되었음을 API에 알려주셔야 합니다. http://apis.map.daum.net/web/sample/mapRelayout/ 순서는 지도가 표출되는 엘리먼트의 사이즈가 변경 되거나 display 속성이 변경됨 map.relayout() 호출하여 변경된 사이즈를 알려 줌 map.setCenter(), map.setLevel() 호출로 지도 중심을 재설정 이렇게 되어야 하며 만약 iframe같이 다른 페이지의 문서가 삽입된 경우에는 해당 iframe의 onload 이벤트…
map.relayout() 을 호출해 주세요. 아래는 이 전의 답변글들이고요. 그리고 지도의 영역이 바뀔 때, 지도 중심은 유지되지 않고 변합니다. 지도 영역이 변경될 때나, 매 resize 이벤트 상황에서 지도 중심을 항시 유지하는 코드를 넣어주셔야만 지도 중심이 유지 될 거에요. 아래는 viewport를 변경 가능한 어플리케이션에서 지도를 사용할 때의 솔루션입니다. 정확하게 질문의 상황과는 같지 않지만 이런 식으로 지도 중심을 유지하고 있다 정도로만 참고 부탁드립니다.
클릭 이벤트에서는 미리 지도를 생성한 것이 아닌 disply: block으로 css를 변경 후 지도 객체 생성하기 때문에 지도 width, height 크기에 맞게 생성이 되었지만 display: none -> display: block 처럼 동적으로 사이즈가 변경된 경우에는 none 상태 즉, 지도의 크기가 정확하지 않은 상태로 지도가 생성이 되었기 때문에 block으로 풀어준 시점에 지도의 사이즈가 변경이 되었음을 알려주는 relayout() 함수를 호출해야 합니다. 아래 링크 참고해주세요.
리액트를 사용하는데, 먼저 지도의 중심좌표를 클라우드에서 불러서 맵을 로드합니다.
클라우드에서 불러올 때, 가끔씩 중심좌표가 undefined가 되었을때 렌더링함을 확인하였습니다.
렌더링하는 타이밍이 정말 미묘하게 늦을때가 있었던 모양입니다.
그래서 랜덤하게 맵 로드가 안되었던 것 같습니다.
또한 지도가 조금만 나오는 문제도 말씀해주신 map. relayout() 함수로 해결하였습니다.
이제 지도가 로드되지 않는 현상은 해결되었습니다.
이 문제가 사라지니, NaN문제도 사라졌습니다. 감사합니다!!
1개의 좋아요
그런데 한자기 문제가 생겼습니다.
지도가 조금만 나올 때, 다시그리도록 relayout()을 사용하여 지도를 그리면, 지도의 위치가 달라지는 때가 있습니다.
맵 위치가 달라질 이유는 별로 없다고 생각하는데…
다른 글들을 보면서 추측되는 것은, CSS때문에 맵 위치가 달라지는것인지, 아니면
제가 모르는 창크기변경이 있는것인지 확인중에 있습니다.
1개의 좋아요
답변으로 드린 첫 번째 링크 확인해보시면
크기가 변경되었기 때문에 위치도 다시 설정해야 합니다.
이전 지도의 중심과 레벨 값을 갖고 있다가
relayout 호출 후 지도 중심을 재설정해주세요.
1개의 좋아요
크기를 변경하는 부분이 없다고 생각하는데, 맵 로드중에 그냥 크기가 변경될 수도 있나요?
항상 그러면 무언가 문제가 있겠거니 하겠는데
10번 리프레쉬하면 1~2번정도만 그렇게 재현되니 수정하기가 참 난해하네요.
크기를 변경하는 부분이 없다는 게 어떤 말씀이신가요?
지도의 크기가 변경돼서 relayout()을 호출한 게 아닌가요?
아직 로드 관련 문제가 완전히 해결되어 보이지 않습니다.
지도를 생성하는 시점 문제 같아 보이기도 하는데요.
지도를 로드하는 시점에 dom객체가 잘 생성되었는지, 스타일이 들어가 있는지 확인해보시고,
react로 개발 중이라면 아래 링크도 함께 확인해주세요.
지도/로컬 API에 대한 문의게시판입니다.
React에서 다음 map api를 활용하고자 하는데요. http://apis.map.daum.net/web/guide/ 위 링크에 공개된 map 기본 api를 적용하려면 react에서 어떤식으로 사용해야 할까요?
너무나 간단한것인데 처음이라 어렵네요.
가능하면 자세한 답변 부탁드립니다.
지도/로컬 API에 대한 문의게시판입니다.
안녕하세요
제목처럼 react v16, react-router v4, redux 3을 사용해서 개인적인 프로젝트 진행중에 있습니다
우선 구현하려는 부분은 지도에 클러스터를 생성 후 클릭하여 전체 리스팅 페이지로 이동한 뒤 다시 뒤로가기를 누르면 지도 및 클러스터를 원래대로 원복시켜놓으려고 합니다
여러가지 방법을 고려하다가 결국 기존 react state로 관리되던 것들을 다 redux로 밀어넣고 해당 데이터를 통해 뒤로가기 후 redux에 저장되어있는 데이터를 가지고 다시 다른 컴포넌트들은 원복시키게 되었는데
지도의 중심점이 자꾸 틀어져서 나옵니다.
코드는 기존 angular코드를 react로 포팅하는 작업이여서 매우 크기 때문에 가능하면 말로 설명드리고자 합니다
우선 map 컴포넌트에서 componentWillUnmount에서 지도의 현상태를 저장합니다
componentWillUnmount() {
let {isShow…
1개의 좋아요
lea.ju님의 말이 맞는것 같습니다.
지도가 생성될때 뭔가 문제가 있는 것 같습니다.
감사합니다…ㅠㅠ 이렇게 적극적으로 문제해결에 도움을 주시다니 감동이에요.
잘 해결해보겠습니다.
1개의 좋아요
결국 두번째 해결방안인 setTimeout() 메서드로 지연시간을 주었습니다.
클라우드 데이터 통신이 늦을때도 있기 때문인지
아니면 로드하는데 오래걸려서 그런지
500ms나 줘야 완전히 버그가 없어졌습니다.
차차 줄여가야겠습니다. 감사합니다.
안녕하세요.
몆일째 지도를 load못하고 있는데 맵 로드 부분만 리엑트 코드 공유해주실수 있나요?
보여주신다면 너무 감사하겠습니다…
1개의 좋아요
제 노트북에서는 랜더링 해준 좌표만큼주고 맴도 잘뜨고 오버레이도 잘뜹니다 근데 다른 사람 노트북에서 저의코드를 그대로 복사한후 실행 시켜는데 뭔가 랜더링이 잘 안불러져오는 상황 같이 위쪽에 만 지도 가뜨고 나머지 부분들은 짤려서 나옵니다 창을 늘리니까 맵이 나오긴하는데 랜더링한 좌표값 정확하게 안뜨고 다른곳에 랜더링이 되어있는 상황이 나옵니다 혹시 이런 오류 아시는지 ㅠㅠ