카카오지도 API 마커 이미지 겹치게 하기

원래 계획대로면

요로코롬 생긴 귀여운 아이콘들을 지도에 박는게 목적이었다. 

그래서 카카오API에서 제공하는 마커 함수를 사용하면서, 이 마커함수에 CSS를 적용시켜 테두리 원과 색, 모양을 만드려 했는데 

애석하게도 id나 class가 존재하지 않아 마커에만 CSS를 적용할 수는 없었다. 

심지어 map 하위에 있는 img에 박는것도 안된다. 지도 자체가 img 태그로 불러와져서...

 

그럼 결국 저 마커를 하나하나 만들어 박아야되나? 라는 절망감에 빠져있었는데, 번뜩하고 뭔가 지나갔다. 

 

"지도에 마커 박는것 자체는 제한이 없으니, 저 아이콘을 마커로 만들어서 지도에 박을때 배경도 마커로 만들어 박으면 되는것 아닌가?"

 

그대로 실행에 옮겼다. 

    var backMarkerImage = new kakao.maps.MarkerImage( //마커 이미지 크기 및 위치 조정 
        "/static/image/backMarker/backMarker1.png",
        new kakao.maps.Size(32, 40),
        {
            offset: new kakao.maps.Point(15, 29)
        }
        
    ); 

    var markerImage = new kakao.maps.MarkerImage(
        "/static/image/icons/"+catName+".png",
        new kakao.maps.Size(30, 30),
        {
        }
    ); 
    
    
    var backMarker = new kakao.maps.Marker({ //배경 마커
        map: map, // 마커를 표시할 지도
        position: new kakao.maps.LatLng(list['mapy'],list['mapx']), // 마커를 표시할 위치
        image : backMarkerImage, // 마커 이미지 
    });
    
    var marker = new kakao.maps.Marker({ //실제 마커
        map: map, // 마커를 표시할 지도
        position: new kakao.maps.LatLng(list['mapy'],list['mapx']), // 마커를 표시할 위치
        title : list['title'], // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
        image : markerImage, // 마커 이미지 
        mnum : inum
    });

아래의 marker 객체가 기존에 마커를 생성하던 방식이다. 저렇게 만든다음 아래쪽에서

kakao.maps.event.addListener(marker, 'click', function()

이벤트에 해당 마커 객체를 지정해주면 그 마커를 클릭했을 때 오버레이가 뜨는 방식인데, 배경으로 사용할 마커에는 클릭 이벤트 대응을 해주지 말고 , 적절하게 이미지 위치를 조정해서 겹치게끔 만들어 줘봤다. 

순서상 배경이 먼저 생성된 다음 원래 마커가 나와야 하므로, 배경 마커 객체를 먼저 생성하고 push 해주어야 한다. 

흑흑 성공했다. 이제 각 지역의 카테고리별로 이미지를 다르게 가져오게끔 코드를 적절히 짜주면 된다. 

최종 결과물. 검색 결과 대상의 카테고리에 따라 마커 이미지를 가져와 띄워준다. 이제 배경 색상만 랜더마이징 해서 알록달록하게 나오면 될듯!

 

----

만들어진 결과물 사진

같은 카테고리 아이콘이지만 다른 배경 색상을 가지게 되었고,

같은 배경 색상이더라도 다른 카테고리 아이콘을 가지게 되었다!