在谷歌地图上显示风向

Posted

技术标签:

【中文标题】在谷歌地图上显示风向【英文标题】:Show wind direction on Google Maps 【发布时间】:2011-01-17 17:22:11 【问题描述】:

我计算了风向,现在我想显示风向指向 144 度(在指南针上)。如何在 Google 地图上显示此箭头?

【问题讨论】:

【参考方案1】:
    为了在谷歌地图上显示箭头,您可以创建一个Rich Marker,使用google-maps-utility-library-v3嵌入图像, 接下来使用 css3 转换对图像元素应用度数旋转。

例如:

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

【讨论】:

谢谢塞巴斯蒂安。我一直在寻找一种快速简便的方法来旋转标记,到目前为止,这对我来说是最好的选择。再次感谢您提供的工作示例。

以上是关于在谷歌地图上显示风向的主要内容,如果未能解决你的问题,请参考以下文章

如何在谷歌地图上显示多个信息窗口?

如何在谷歌地图上显示搜索地址。?

在谷歌地图标记上显示信息

在谷歌地图上显示在线对象

在谷歌地图android上显示位置

获取用户国家和城市名称并在谷歌地图上定位