Question

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

Answer 1

为了在Google地图上显示箭头，您可以使用Rich Marker

接下来，使用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
    }
);

在Google地图上显示风向

1 个答案: