J'ai calculé la direction du vent et maintenant je veux montrer à la direction du vent pointant vers 144 degrés (sur la boussole). Comment puis-je montrer cette flèche sur Google Maps?
Ensuite, appliquer une rotation en degrés par rapport à l'élément d'image avec css3 tranformations.
Dans l'exemple :
//content element of a rich markervar richMarkerContent = document.createElement('div');//arrow imagevar arrowImage =newImage();
arrowImage.src ='http://www.openclipart.org/image/250px/'+'svg_to_png/Anonymous_Arrow_Down_Green.png';//rotation in degreevar directionDeg =144;//create a container for the arrowvar 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)newRichMarker({
position : position,
map : map,
draggable :false,
flat :true,
anchor :RichMarkerPosition.TOP_RIGHT,
content : richMarkerContent.innerHTML
});
Merci Sébastien. J'ai été à la recherche d'un moyen facile et rapide pour faire tourner un marqueur et c'est, de loin, la meilleure option pour moi. Un deuxième merci pour un exemple.
Dans l'exemple :
OriginalL'auteur Sébastien Ballesté-Antich