자바스크립트로 카카오맵 기반 마스크맵 만들기 6단계

지도의 중앙값을 기준으로 지도가 동적으로 변경되도록 수정하려 합니다.

동적으로 바꾸기 위해 사용할 것은 

'idle' <- 카카오에서 제공하는 event 를 활용할 예정입니다.

설명과 같이 중심 좌표가 변경될때 발생하는 이벤트이고 

클릭한채로 움직이는 도중에는 발생하지 않는다.

예시로 lat,lng,m 을 전역변수로 맨위에 하드코딩 선언 하고 

ex)

var lat = 37.4797056;

var lng = 126.9984853;

var m = 1000;

idle 초기부분에 설정해주는 곳은 다음과 같습니다.

지도 중심이 변경되었을때 

지도 level 값 , 위도경도 값을 가져옵니다 .

이때 level 값은 마우스 휠로 줌했을때의 level 이며 

특정 level 마다 m(반경) 값을 주었습니다.

기존에 있는 마커를 전부 없애고 새로 세팅하는 함수 입니다.

결과로 마우스로 지도위치를 옮기면 새 지도에 마커를 새로 찍습니다.

lat lng m  값에 따라서 말이지요 .

다음 포스팅에선 

실제 마스크맵에서 쓰고있는 이미지를 마커에 적용시키는 방법을 포스팅 하도록 하겠습니다.