在Google地图上显示风向

本文介绍了在Google地图上显示风向的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我计算了风向，现在我想显示风向指向144度（在指南针上）。如何在Google地图上显示此箭头？ 为了在google地图上显示箭头，您可以创建一个 Rich Marker ，它使用 google-maps-utility-library-v3 ， 接下来，使用css3 tranformations对图像元素应用旋转角度。 例如： p> //丰富标记的内容元素 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'; //旋转程度 var directionDeg = 144; //为箭头创建一个容器 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）;'; //用directionDeg $ b $替换％rotation。rotationStyles = rotationStyles.split（'％rotation'）。join（directionDeg）; rotationElement.setAttribute（'style'，rotationStyles）; rotationElement.setAttribute（'alt'，'arrow'）; //将图像追加到旋转容器元素 rotationElement.appendChild（arrowImage）; //将旋转容器附加到richMarker内容元素 richMarkerContent.appendChild（rotationElement）; //创建丰富的标记（位置和地图是谷歌地图对象）新的RichMarker（ {位置：位置， map：map， draggable：false， flat：true， anchor：RichMarkerPosition.TOP_RIGHT， content：richMarkerContent.innerHTML } ） ; I calculated the wind direction and now I want to show the wind direction pointing to 144 degrees (on compass). How can I show this arrow on Google Maps? 解决方案In order to show an arrow over a google map you can create a Rich Marker that embed an image using the google-maps-utility-library-v3,Next apply a rotation in degree to the image element with css3 tranformations.In example :// content element of a rich markervar richMarkerContent = document.createElement('div');// arrow imagevar arrowImage = new Image();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 directionDegrotationStyles = rotationStyles.split('%rotation').join(directionDeg);rotationElement.setAttribute('style', rotationStyles);rotationElement.setAttribute('alt', 'arrow');// append image into the rotation container elementrotationElement.appendChild(arrowImage);// append rotation container into the richMarker content elementrichMarkerContent.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 }); 这篇关于在Google地图上显示风向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！