Показать направление ветра на Google Maps

Question

Я рассчитал направление ветра и теперь хочу показать направление ветра, указывающее на 144 градуса (на компасе). Как я могу показать эту стрелку на Google Maps?

Answer 1

1. Чтобы показать стрелку над картой Google, вы можете создать Rich Marker , который будет вставлять изображение с помощью google-maps-utility-library-v3 ,
2. Затем примените вращение в градусах к элементу изображения с преобразованиями 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
    }
);