[카카오맵] 마커, 오버레이 처리

처음 지도 API를 접하는 신입들에게는 어마무시하고 접근하기 힘든 무엇이 되었는데요. 저에게도 한동안 카카오맵 API는 공포의 대상이었습니다.

그 이유는
- 코드가 너무 길다
- 비슷한 변수가 연달아서 나와 어디서 적용하는지 확인하기 어렵다
- 함수가 심하게 많다
- 카카오맵 생성자의 이해도가 낮다.

차차 기능이 적은 카카오맵 API는 사용할 수 있게 되었으나, 긴 코드는 진입장벽이 있었습니다.

코드에 대한 리펙토링을 계속 생각하게 되었고, 약간의 해결책을 찾은 것 같아 공유해봅니다.

 

카카오맵으로 마커 표출을 해야 할 때에 이전에는 지도 위에 마커를 생성하고 그 마커를 변수에 저장해서 없애고, 다시 날리고 하는 식으로 작업을 했습니다. 상당한 노가다의 연속이었습니다.

기능구현화면

카카오맵을 작업하다 보면 화면상의 마커를 전부 날리고 다시 올려야 하는 경우가 많은데요.

마커를 다시 셋팅하는 이유
- 지도에서 마커 클릭 시에 클릭한 마커에 해당하는 다른 모양의 마커(이하 마커2)와 커스텀 오버레이를 올려줘야 할 때
- 하나의 마커를 클릭하고 다른 마커를 클릭하면 이전에 선택된 마커의 모양을 다시 돌려줘야 할 때
- 탭 형식으로 된 셀렉트가 있을 경우, 탭버튼을 누르면 데이터를 선별적으로 걸러 지도위의 마커를 재셋팅해야 할 때
- 리스트에서 특정 버튼을 눌렀을 때 마커 클릭과 동일한 효과가 필요할 경우
   (마커를 클릭한 것 같은 효과를 내야할 때)

 

위의 내용이 한 화면에 전부 해당되는 경우가 대부분입니다.

(위의 내용이 대부분 해당되고, 이후에 추가 기능이 붙습니다.)

그러다보니 조금 복잡한 코드가 나오게 되는데요.

기본 마커, 클릭시의 커다란 마커, 클릭시 정보가 노출되는 커스텀 오버레이 이 세가지를 날리고 다시 셋팅하는 과정에서 비슷한 코드들과, 비슷한 변수들이 난무하게 되었습니다. 

기본 기능들로만 500줄은 예사였습니다.

 var originData = [
            {
                id : 1,
                category : 0,
                title : '주문진읍사무소',
                distance : '2.958',
                image : 'http://t1.daumcdn.net/friends/prod/editor/dc8b3d02-a15a-4afa-a88b-989cf2a50476.jpg',
                address : '경기도 양평군 용문면 삼성리 126-5',
                call : '031-0311-4512',
                href : '',
                location : new kakao.maps.LatLng(37.7519967,128.8759524),
                marker : {},
                bigMarker : {},
                overlay : {},
            },{
                id : 2,
                category : 2,
                title : '주문진 버스종합터미널',
                distance : '2.958',
                image : 'http://image.auction.co.kr/itemimage/1a/61/cd/1a61cd67d6.jpg',
                address : '경기도 양평군 용문면 삼성리 126-5',
                call : '031-0311-4512',
                href : '',
                location : new kakao.maps.LatLng(37.8940016,128.8234193),
                marker : {},
                bigMarker : {},
                overlay : {},
            }
        ]
        
        //data 배열에 각 overlay(마커,오버레이,빅마커) 저장
        for(var i= 0;i < data.length;i++){
            var eachData = data[i];
            eachData.marker = setMarker(markerOption, eachData);//마커 추가
            eachData.overlay = setOverlay(eachData); //오버레이 추가
            eachData.bigMarker = setMarker(bigMarkerOption, eachData); //빅마커 추가
        }
        
        //지도 위의 모든 overlay 없애기
        function clearOverlays(data) {
            for (var i = 0; i < data.length; i++) {
                data[i].marker.setMap(null);
                data[i].bigMarker.setMap(null);
                data[i].overlay.setMap(null);
            }
        }

marker,bigMarker,overlay는 카카오맵 함수를 이용해 채운다

 

카카오맵 샘플에 각 객체에 location으로 'new kakao.maps.LatLng(37.7519967,128.8759524)' 이런식의 카카오맵 생성자가 저장된 것을 보았습니다.

그래서 생각한 것이 빈 객체항목을 만들고, 그 안에 마커를 저장해보자는 것이었습니다.

데이터에 직접 넣어주니까 지도에서 setMap(null), 다시 setMap(map) 해주는 과정이 굉장히 단축되었습니다. 

 

        var markerOption = {
            imageSrc : "/images/program/map_icon.png",
            width:192,
            height:34,
            eachWidth : 24,
        }
        var bigMarkerOption = {
            imageSrc : "/images/program/map_icon_big.png",
            width:336,
            height:60,
            eachWidth : 42,
        }
        
        //마커 생성 기본
        function setMarker(markerOption, data) {
            var imageSize = new kakao.maps.Size(markerOption.eachWidth, markerOption.height),
                imageOptions = {
                    spriteOrigin: new kakao.maps.Point(parseInt(data.category)*markerOption.eachWidth, 0),
                    spriteSize: new kakao.maps.Size(markerOption.width, markerOption.height)
                };
            var markerImage = new kakao.maps.MarkerImage(markerOption.imageSrc, imageSize, imageOptions),
                marker = new kakao.maps.Marker({
                    position: data.location,
                    title : data.title,
                    image: markerImage
                });
            return marker;
        }

마커의 기본 옵션도 객체로 만들어서 넣어주니 기본생성이 간단하게 마무리 되었습니다.

 

동일한 화면을 구현했는데, 이전 대비 60%이상 코드가 줄어들었습니다.