마커 회전이 가능한가요?

지도/로컬 API
,
#1

샘플을 보고 따라하는 중입니다.
마커를 회전 시킬수 있나요?
WEB Map에선 지도자체가 회전안되기에 마커를 회전하려 합니다.
(자동차가 도로를 달리다 자회전 하듯…)
Doc을 봐도 회전관련은 없는데 해결방안이 있을까요?

#2

Marker로는 불가능하며
CustomOverlay를 사용하셔서 이미지를 넣으셔야 합니다.
CustomOverlay의 내부는 사용자가 만든 HTML이 그대로 들어가므로 웹에서 요소를 회전시킬 때 사용하는 모든 방법들을 다 사용할 수 있습니다.

<style>
    .node {
        background-image: url(http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/sign-info-64.png);
        width: 64px;
        height: 64px;
    }
</style>
<div id="map" style="width:100%;height:350px;"></div>
<script>
    function getAngle(center, target) {
        var dx = target.x - center.x;
        var dy = center.y - target.y ;
        var deg = Math.atan2( dy , dx ) * 180 / Math.PI; 
        
        return (-deg + 450) % 360 | 0;
    }

    var map = new daum.maps.Map(document.getElementById('map'), {
        center: new daum.maps.LatLng(37.402054, 127.108209)
    });

    var pos = new daum.maps.LatLng(37.402054, 127.108209); 

    var content = document.createElement('div');
    content.className = 'node';
    var overlay = new daum.maps.CustomOverlay({ 
        content: content,
        position: pos,
        map: map
    });
    
    var proj = map.getProjection();
    var overlayPos = proj.containerPointFromCoords(overlay.getPosition());
    daum.maps.event.addListener(map, 'mousemove', function(e) {
        var angle = getAngle(overlayPos, e.point);
        content.style.transform = 'rotate(' + angle + 'deg)';
    });
</script>

위 예제에는 DIV Element에 background image 속성으로 이미지를 넣었습니다.
MapProjection을 사용하여 마우스의 위치를 화면 픽셀 좌표로 변환시켰습니다.
그리고 나서 삼각함수를 사용하여 화면에서의 각도를 구하는 방식으로 회전각을 구했습니다.
최종적으로 CSS3의 transform: rotate 기능을 사용하여 Element의 스타일로 회전을 시켰습니다.

이것 말고도 회전시키는 방법은 여러가지 있습니다.

SVG혹은 HTML Canvas로 회전 시킬 수도 있습니다.

transform을 지원하지 않는 브라우저를 대응하기 위해서는
방위에 맞는 이미지 셋을 여러장 준비하여 (8장 또는 16장, 아니면 다 집어넣은 스프라이트 이미지 한 장)
각도에 따라 background image replace 하는 방식도 고려해 볼 수 있습니다.

1개의 좋아요
마커 90도 회전 소스코드 기능 가능 한가요?