customoverlay를 활용한 kakaomap marker 회전 마커회전

customoverlay를 활용한 kakaomap marker 회전 마커회전

 

기존의 마커 속성에 접근하여 마커를 회전하는 방법은 아래의 link를 참고하세요.

 

link : https://aljjabaegi.tistory.com/321

다음지도 마커 회전하기, 이미지 회전, 방위각 적용

위의 방법은 단점이 있습니다.

카카오맵쪽에서 마커 회전에 대한 API를 제공하지 않기때문에,

내부 오브젝트의 이미지 변수명이 바뀌게 되면 동작하지 않게되죠.

매번 오브젝트의 변수명을 확인하여 수정해주어야 합니다. 

 

이렇게 하지 않고, 

마커 위에 customoverlay를 활용하여 방위각 설정을 하면, 매번 바꿀 필요 없이 회전을 표시 할 수 있습니다.

 

 

 

위의 이미지가 적용된 화면입니다.

파랑색원형이 마커이고 화살표가 커스텀오버레이 입니다. 

마커는 그대로 표출하고 커스텀오버레이로 올라간 div의 방위각을 적용하였습니다.

 

코드를 보시죠.

 

var aziContent = '<div class="'+this.mkOpt[mkType].azimuth.className+'" style="transform:rotate('+data[i].azimuth+'deg)";></div>';
this.markerObj[keyColumn].co = new kakao.maps.CustomOverlay({
       map: that.map,
       position: position,
       content: aziContent,
       yAnchor: 1
});

 

커스텀오버레이쪽 코드만 발최하였습니다.

내용만 보시면, 커스텀오버레이인 div 의 transform:rotate 를 방위각으로 주어 회전하였습니다.

나머지는 카카오에서 제공하는 기본 예제코드와 비슷합니다. 

 

마커회전에대한 api가 없는 지금으로선 방위각을 표출할 수 있는 최선의 방법인것 같습니다.