在Google地图上显示风向 [英] Show wind direction on Google Maps

问题描述

我计算了风向，现在我想显示风向指向144度（在指南针上）。如何在Google地图上显示此箭头？ 为了在google地图上显示箭头，您可以创建一个 Rich Marker ，它使用< a href =http://code.google.com/p/google-maps-utility-library-v3/ =noreferrer> 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?

解决方案

1. 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,
2. Next apply a rotation in degree to the image element with css3 tranformations.

In example :

// 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地图上显示风向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！