Mostra direzione del vento su Google Maps

Question

Ho calcolato la direzione del vento e ora voglio mostrare la direzione del vento che punta a 144 gradi (sulla bussola). Come posso mostrare questa freccia su Google Maps?

Answer 1

1. Al fine di visualizzare una freccia su una mappa di Google è possibile creare un Rich Marker che incorporare un'immagine utilizzando il google-maps-utility-library-v3,
2. Applicare poi una rotazione in grado di l'elemento di immagine con tranformations CSS3.

Nell'esempio:

 

// 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 
    } 
);