웹뷰에서 정적 지도를 노출하려고 합니다. 다만 StaticMap을 안 쓰고 구현하려합니다

지도/로컬 API
1

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610

안녕하세요

사용자의 주소를 기반으로 지도를 출력해서 보여주고자 합니다.

다만, draggable: false로 지정했을 때, 휴대폰 내의 지도 영역 드래그의 이벤트가 막혀 전체 스크롤이 되지 않고 있는데요.

그래서 정적 이미지 (StaticMap)을 사용하려 했는데, 2048x2048의 제한으로 이미지가 억지로 확대되는 이슈도 있습니다.

그렇기에, draggable: false로 지정하면서, 지도를 선택하고 드래그 시 전체 스크롤도 되었으면 하는데요.

혹시 어떻게 하면 될까요 ?

PS. 아래 질문이 비슷하여 한 번 가져와보았습니다.

https://devtalk.kakao.com/t/topic/134304/1

2

draggable 옵션을 false로 설정하면 지도 위에서 drag가 막히고 페이지 내 스크롤은 움직이고 있는데
스크롤이 안되는 현상과 웹뷰를 사용하는 환경에 대해 자세히 설명 부탁드립니다.

그리고 정적 이미지는 최대 2048x2048만 제공하고 있어서 사이즈에 맞는 크기로 map 영역을 조정해서 사용하시면 됩니다.
억지로 확대되는 이슈라는 게 어떤 부분인지 확인이 어려워서 이 부분도 현상을 확인할 수 있는 코드 첨부 부탁드립니다.

3

@lea.ju

웹뷰가 아닌 모바일 브라우저에서도 확인이 되어서, 아래 기준으로 얘기를 드려봅니다.

  1. iOS 17.3.1 / Safari / iPhone 12 mini
  2. 지도 이동 막기 - Kakao 지도 Web API
    2-1. 지도 드래그 이동 켜기
    2-2. 지도 드래그 이동 끄기

위의 환경으로 테스트를 했습니다.

[재현경로]

  1. 지도 영역 아닌 부분 드래그
  2. 지도 영역인 부분 드래그 (지도 드래그 이동 끄기) => 페이지 스크롤 안됨
  3. 지도 드래그 이동 켜기 => 지도 영역 아닌 부분 드래그 => 페이지 스크롤 됨
  4. 지도 영역인 부분 드래그 => 지도 이동 됨

[원하는 결과]
2번에서 지도 영역인 부분 드래그를 하더라도 페이지 스크롤이 됨을 원합니다.

4

설명 감사합니다.
지도 영역 안에서 드래그를 할 때 페이지가 스크롤되게 하는 부분은 API에서 의도적으로 막은것으로
이벤트가 브라우저까지 전파되지 않기 때문에 불가합니다.

회피 방법은 draggable을 false로 할 경우 빈 div를 지도 위에 올려서 브라우저가 움직이게 하는 방법이 있습니다.
참고 부탁드립니다.

<div style="position: absolute; top: 0px; width:100%;height:500px; z-index: 2;"></div> <!--지도 위에 올릴 빈 div-->
<div id="map" style="width:100%;height:500px;"></div>
<script>
    let mapContainer = document.getElementById('map'), // 지도를 표시할 div
    mapOption = {
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        draggable: false, // 지도를 생성할때 지도 이동 및 확대/축소를 막으려면 draggable: false 옵션을 추가하세요
        level: 3 // 지도의 확대 레벨
    };

    let map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
</script>
1개의 좋아요