Google지도에서 바람의 방향을 표시

Question

바람의 방향을 계산 했으므로 바람 방향을 144도 (나침반 방향)로 표시하고 싶습니다. 이 화살표를 Google지도에 표시하려면 어떻게해야합니까? 는 google-maps-utility-library-v3을 사용하여 이미지를 포함 Rich Marker을 만들 수 구글지도 위에 화살표를 표시하기 위해

Answer 1

1. ,
2. 다음 CSS3의 tranformations으로 이미지 요소에 정도의 회전을 적용한다. 예에서

:

 

// content element of a rich marker 
var richMarkerContent = document.createElement('div'); 

// arrow image 
var arrowImage   = new Image(); 
arrowImage.src   = 'http://www.openclipart.org/image/250px/' + 
          'svg_to_png/Anonymous_Arrow_Down_Green.png'; 

// rotation in degree 
var directionDeg   = 144 ; 

// create a container for the arrow 
var rotationElement  = document.createElement('div'); 
var rotationStyles  = 'display:block;' + 
          '-ms-transform:  rotate(%rotationdeg);' + 
          '-o-transform:  rotate(%rotationdeg);' + 
          '-moz-transform:  rotate(%rotationdeg);' + 
          '-webkit-transform: rotate(%rotationdeg);' ; 

// replace %rotation with the value of directionDeg 
rotationStyles   = rotationStyles.split('%rotation').join(directionDeg); 

rotationElement.setAttribute('style', rotationStyles); 
rotationElement.setAttribute('alt', 'arrow'); 

// append image into the rotation container element 
rotationElement.appendChild(arrowImage); 

// append rotation container into the richMarker content element 
richMarkerContent.appendChild(rotationElement); 

// create a rich marker ("position" and "map" are google maps objects) 
new RichMarker(
    { 
     position : position, 
     map   : map, 
     draggable : false, 
     flat  : true, 
     anchor  : RichMarkerPosition.TOP_RIGHT, 
     content  : richMarkerContent.innerHTML 
    } 
);