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

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

 

다음지도에 자동차 마커가 올라가는데 방위각에 따라서 회전해 달라는 요청을 받았습니다.

그런데 다음지도 도큐먼트에는 마커를 회전하는게 나와있지 않아,

마커를 생성하면서 해당 마커의 이미지 css의 transform을 사용하여 회전하였습니다.

 

for (var j in markerArray){ 
    var marker = new daum.maps.Marker({
        map: map, 
        position: markerArray[j].latlng, 
        title : markerArray[j].title, 
        image : iconImage  
    });
    $(marker.Na).css('transform','');
    $(marker.Na).css('transform','rotateZ('+markerArray[j].azimuth+'deg)');
    array.push(marker);
}

 

 

 * 2018-06-18 update

- 기존에 ld 가 아닌 md 객체에 transform css를 변경해 주어야 합니다.

- $(marker.ld)  ->  $(marker.md)

 

* 2019-06-27 update

- 기존에 ld 가 아닌 md 객체에 transform css를 변경해 주어야 합니다.

- $(marker.md) -> $(marker.Na)

 

생성한 마커를 console로 찍어보시면 아래와 같이 객체를 확인 하실 수 있습니다.

이 객체 내에서 img 를 가지고 있는 값을 확인해서 수정하시면 되는데요,

주기적으로 img를 가지고 있는 명칭이 변경이 됩니다. (ld -> md -> Na)

API에 추가가 되었으면 좋겠네요.

 

마커 객체

 

해당 마커의 transform 속성을 초기화 하고 데이터의 방위각 만큼 회전하였습니다.

그럼 아래와 같이 이미지가 회전이 되어 표출되게 됩니다.

 

 

커스텀오버레이를 활용한 마커회전 방법은 아래의 Link를 참고하세요.

 

Link :https://aljjabaegi.tistory.com/525

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