map.setDraggable(false); 이 명령어로 막았는데 아이폰에선 지도위에서 웹쪽 스크롤이 가능한데 안드로이드쪽에서는 안되는 것 같아서…안드로이드를 따로 개발하지 않고 그냥 웹쪽에서 개발한 것을 핸드폰에서 확인중이었습니다
혹시 모바일에서 지도의 확대축소는 막되 지도 위에서 스크롤을 올리고 내릴때 바깥 영역 스크롤이 가능하게는 어려울까요?
확인해 보겠습니다.
넵 감사합니다 제가 너무 질문을 두서 없이 써서 확인이 어려우실 것 같아서 단계별로 다시 적어보겠습니다 ㅠㅠ
- 지도를 웹페이지 (자바스크립트+php) 로 개발했습니다
- 지도에서 setDraggable(false);를 해서 지도 이동을 막아두었습니다
- 아이폰에서는 지도를 막은 부분에서 스크롤을 올리고 내렸을때 웹페이지 (지도가 포함된 스크롤이 있는 웹페이지) 의 스크롤이 움직여지는데 안드로이드에서는 움직여지지 않았습니다
- 안드로이드에서 지도 화면이 꽉차서 웹 페이지 스크롤이 움직여지지 않으면 페이지 이동이 어려운데 혹시 이 부분을 제가 제어가 가능한지 여부가 궁금합니다
지나가다, 예전에 저도 비슷한 현상을 겪어서 해결한 적이 있습니다.
전 API기능을 쓰진 않았고, 그냥 따로 만들어서 해결하였는데요.
힌트는 그 블로그나 카페 이런데서 지도를 첨부한 후에 폰으로 보시면 지도가 첨부된 페이지를 볼 수 있는데,
거기에 비슷한 기능이 구현되어 있어서 따라하였습니다.
기능은 간단합니다.
그냥 화면 스크롤을 막고 싶을때 지도 위에다가 투명한 DIV태그를 하나 올리면 됩니다. (지도와 크기가 딱맞는 투명 DIV요)
그럼 줌in/out, 드래그 모두 막힙니다.
전 추가적으로 덮는 DIV(이하 cover) 에 터치이벤트 달아서 거기 선택하면 특정 다른 기능이 실행되게 하기도 하였습니다.
도움이 되시길…
1개의 좋아요
답변 감사드립니다! 제가 contents 로 오버레이를 놓고 컨텐츠 부분에서 이벤트를 컨트롤하는 부분이 있어서 클릭 이벤트에 따라 2가지 답변이 나뉘게 됩니다 ㅠㅠ) div를 투명으로 덮게 되면 그 이벤트를 조정하기가 어려울 것 같아서요…말씀 너무 감사드려요
혹시 투명한 div태그라고 말씀하시는거라면 지도 크기에 맞춰 style로 크기를 키우고 disabled를 말씀하시는것이 맞으신지 여쭈어도 될까요?
disabled가 display=none을 말씀하신게 아니라면;;;
일단 대략 코드를 적으면,
<div id="container" style="position:relative">
<div id="mapWrap" style="width:600px;height=600px;z-index:1">
<div id="mapView"><!--여기에 지도가 들어감--></div>
</div>
<div id="corver" style="width:600px;height=600px;z-index:2;position:absolute;top:0;left:0;opacity:0"></div>
</div>
네 말씀하신 것처럼, 크기는 지도와 크기가 같습니다. resize이벤트나, 워 기타등등 크기조절 이벤트에 mapWrap이랑 cover가 동시 대응되게만 했고, cover만 absolute로 해서 위에 띄운 후, z-index값을 더 높게 설정하고 opacity를 0으로 해서 안보이게 하였습니다.
이렇게 API의 기능을 사용하지 않는 건, 음 제 스타일이기도 한데, API의 기능을 반드시 써야 구현이 되는 상황이 아니라면,
그냥 제가 더 컨트롤 하기 쉬운 방법으로 직접 구현하는게 더 편하더라구욤…