카카오 지도 질문드립니다. 새로고침을 하면 보여지는 위치가 다릅니다

카카오맵 API (지도/로컬)
, ,
1

제목 없음2

전체 코드입니다.
새로고침을 하면 제대로 출력이 될때가 있고 안될때가 있습니다.
아래 사진들 중에서 첫번째 사진이 정상출력 지도이며, 두번째 사진이 잘못된 출력 지도입니다.
콘솔로 center 좌표값을 확인해보면 항상 같지만 새로고침을 하면 두번째 사진처럼 센터에서 벗어난 곳을 출력합니다.
10번 페이지 로딩을 시도하면 1번 될까말까합니다. 계속 두번째 사진처럼 잘못된곳을 센터로 잡네요
이유가 뭘까요?
제목 없음

아 해당 지도는 다른 html 문서에서 iframe으로 호출합니다.

================================================================================
원인을 찾았습니다

다른페이지에서 아래처럼 iframe을 사용합니다.

제목 없음3

여기서 style=“display:none” 옵션을 없애주니 잘 보이네요. 왜 이런걸까요 허허… style=“display:none” 없으면 안되는 속성인데 ㅠㅠ

2

daumapi 라는 함수를 호출하는 시점을 잘 잡으셔야 합니다.
지도는 Map 객체에 넣어주는 HTMLElement의 width, height에 따라 지도 영역을 잡으며
해당 속성값이 제대로 지정되어 있지 않았을 경우, 즉 display:none 이었다거나 block이 된다거나 동적으로 사이즈가 변경되는 경우에는 문제가 됩니다.

이 경우 map.relayout()이라는 함수를 호출하여 지도 영역이 변경되었음을 API에 알려주셔야 합니다.
http://apis.map.daum.net/web/sample/mapRelayout/

순서는

  1. 지도가 표출되는 엘리먼트의 사이즈가 변경 되거나 display 속성이 변경됨
  2. map.relayout() 호출하여 변경된 사이즈를 알려 줌
  3. map.setCenter(), map.setLevel() 호출로 지도 중심을 재설정

이렇게 되어야 하며

만약 iframe같이 다른 페이지의 문서가 삽입된 경우에는 해당 iframe의 onload 이벤트나 DomContentLoaded 이벤트에서부터 지도 코드가 시작되어야 안전합니다.

1개의 좋아요
3

우선 답변 감사드립니다!
iframe 에 onload나 DomContentLoaded 쓰면 해결되는건 확인했습니다… 허나 프로젝트가 워낙 많아 해당 방법으로 사용하면 하나하나 다 추가해야하기때문에 번거로운 문제가 좀 많습니다…
딱 다음지도.html 만 수정하여 적용해서 여러 프로젝트에 한번에 적용할 수 잇는법을 찾아야합니다 ㅠㅠ
제목 없음4

말씀해주신 코드를 맨 아래에 추가해봤습니다만… 안되네요 허허…
사이즈 변경은 필요없을것같아 지웠습니다…

4

위의 경우에는

모든 로직을

window.onload = function() {
    var lat = ...
    var lng =  ....
    // 이 안에 넣고
    // 스크린 샷 기준으로
    // 마지막 세 줄은 (relayout 포함) 필요 없을거니 지워주세요.
}
1개의 좋아요
5

여전하네요 ^^;;;
제목 없음5

위와 같이 수정했습니다만 여전히 같은 상황입니다…
A페이지에서 iframe을 사용하여 daumMap.html 을 불러옵니다…
정녕 display:none 을 사용하지 말아야할까요… ㅠㅠ…

6

흐음…
iframe을 소유한 부모 창의 속성 변화를
iframe 내부에 전달하는 구조가 아닌 이상은 딱히 방법이 없어 보이네요.

MutationObserver를 사용할 수도 없고…

미리 로딩시킨 후, hidden 시켜서 사용하는 방식말고
특정 조건을 만족할 때, iframe의 크기를 지정하고 src를 대입하는 방식이라면 가능할 수 있겠네요.
이것도 결국 타이밍을 고정하는 방식이라 부모 창의 스크립트를 수정해야 하는 번거로움이 있네요.

1개의 좋아요
7

결국은 부모창을 건드리는 방법밖에 없네요 ㅠㅠㅠㅠㅠㅠ
하… 노가다를 하던가 다른 api를 쓰던가해야겠습니다 ㅠㅠ naver api 사용할때는 이런문제가 없었는데 ㅠㅠㅠㅠ

긴 답변 감사드립니다 ㅠㅠ