지도 API 활용 - Kakaomap 활용 [지도 잠금]

Kakaopmap API 샘플 코드를 보고 활용 연습을 해보겠음 

직접 해보면서 나한테 맞춰서 약간의 코드 수정했음

카카오 개발 홈페이지에서 보여주는 예제 샘플을 참고하지만, 

그대로 사용 안 하고 내 맘대로 하겠음

 

카카오 예제실습에 나와있는 코드만 사용하는게 아니라

제멋대로 살짝 추가하는 부분도 있으니 봐주시고

만약 수정할 부분이 있거나 그러면 알려주세요 ~ 

 

 
 

---

Contents

---

1. 기본지도로드      

           1.1.  2D지도생성
           1.2.  2D지도마커추가

지도 API 활용 - 2D 지도(기본지도로드)

2. 지도활용 Kakaopmap

            2.1. 지도 이동 · 레벨 바꾸기
            2.2. 지도 웹페이지에 중심좌표 및 컨트롤 정보 나타내기
            2.3. 지도 컨트롤 올리기 (기본 컨트롤, 사용자 컨트롤 올리기)
            2.4. 지도 잠금
 
 

.....

 
 

 

---

 

 

 

2.4. 지도 잠금, 잠금 해제

 

 

 

---

Kakao Developers . Kakao Maps API 기본 코드 

---

직접 해보기

Kakao Developers.Kakao Maps API - Sample - 지도이동막기 

Kakao Developers.Kakao Maps API  Sample - 지도 확대 축소 막기

 
지도를 잠그기 위해선 마우스 이동, 및 확대 축소 기능이 되지 않아야 함

봉삼네는 두개를 합쳐서 잠금,잠금풀기로 하겠음

---

" Bongbongsam " Kakao Maps API 실행결과 바로 보기  

---

glass의 Kakaomap 2.4. 지도 잠금

직접해보기

<!--지도 잠그기-->

<p>

    <button onclick="setDraggable(false),setZoomable(false)">지도잠금</button>

    <button onclick="setDraggable(true),setZoomable(true)">지도잠금풀기</button>

</p>

<!----화면출력---->

    /*----이동기능막고풀기----*/

    function setDraggable(draggable) { map.setDraggable(draggable); }  

    /*----줌기능막고풀기----*/

    function setZoomable(zoomable) { map.setZoomable(zoomable); }

 

setDraggable(draggable)

마우스 드래그와 모바일 터치를 이용한 지도 이동 가능 여부를 설정

map.setDraggable(false);

setZoomable(zoomable)

마우스 휠과 모바일 터치를 이용한 지도 확대, 축소 가능 여부를 설정(지도 객체 함수 호출을 통한 확대, 축소는 동작.)

// 지도의 마우스 휠, 모바일 터치를 이용한 확대, 축소 기능을 막는다.
map.setZoomable(false);

// 지도 객체 함수 호출을 통한 확대, 축소는 동작한다. 
map.setLevel(3);

 

 
 

 
다음글 바로가기