지도/로컬 API에 대한 문의게시판입니다.
웹의 특성상 페이지 이동 후 돌아오기가 애매해서,
div를 Position:Fixed 로 덮어서 이 div 안에 지도를 그리고 있습니다.
웹에서는 잘 나오길래 문제가 없는 줄 알았습니다.
그런데 모바일 앱에서 테스트 중, 지도 레이아웃이 깨지는 것을 발견했습니다.
원인은 가상 키보드 때문입니다.
지도에서 좌표를 입력받는 것 외에, 제목이나 내용을 입력받고 있는데,
이를 위해 가상키보드가 뜬 이후로는 지도 레이아웃이 깨집니다.
원래는
■■
■■
이렇게 꽉차게 나왔다면 (4개가 화면이 꽉 찬 것 기준)
■□
□□
깨진 후에는 이런식으로 … 왼쪽 위에만 약간 나오고 나머지 화면은 Daum 지도 데이터 로딩중. 이런식으로 써있습니다.
가상 키보드 때문에 화면이 축소된 이후로 뭔가 영역이라든지 변경이 된 것 같은데요.
이 영역을 다시 원상복구 해주려면 어떤 부분을 건드려야 하는지 모르겠네요.
api 가이드에도 딱히 없고요.
사이즈에 대한 문제가 아닌 것 같습니다.
map.relayout()를 호출해도 문제는 해결되지 않았습니다.
몇 번 테스트하면서 발견한 점이 있습니다만,
정상 지도의 경우
< div id=“map”>
< div>
< div>
< div>< /div>
< div>< /div> ← 이 두번째 div에 < img src=“주소”> 형태로 지도 이미지가 조각조각 나뉘어서 들어가 있습니다.
< div>< /div>
< div>< /div>
< div>< /div>
< div>< /div>
< /div>
< /div>
< /div>
그러나 가상키보드를 호출한 이후,
콘솔에서 Unable to preventDefault inside passive event listener due to target being treated as passive. 이러한 메세지가 뜨더니,
div 안의 지도 이미지들이 전부 사라지고, 하나만 남아있게 됩니다…
지도를 감싸는 영역의 사이즈를 판단하고 이미지를 몇개 배치할지 결정하는 것이 API 내부에서 하는 일입니다.
그래서 제가 의심되는 부분 + 해결책으로 제시해 드린게 relayout이고요.
만약 말씀해 주신대로 나왔다면
API에서는 해당 영역이 이미지 하나로 커버가 가능한 사이즈가 되었다고 판단한거고 하나만 남기고 모두 삭제해 버린 것이 그 결과입니다.
지도 영역 엘리먼트를 position:fixed로 가상키보드를 띄워서 테스트 해봤는데 저는 재현이 안되더군요 제 테스트 환경은 iPhone 입니다.
일단 테스트해보신 기기와 브라우저를 명시해주시고
작성하신 html+js 코드를 첨부해 주시거나 제가 확인할 수 있는 외부 URL을 주시면 확인해 보겠습니다.
