在谷歌地图上显示风向答案

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

我计算了风向，现在我想显示风向指向 144 度（在指南针上）。如何在 Google 地图上显示此箭头？

【问题讨论】：

标签： javascript google-maps google-maps-api-2 weather compass-geolocation

【解决方案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
    }
);

【讨论】：

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