在谷歌地图上显示风向
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
);
【讨论】:
谢谢塞巴斯蒂安。我一直在寻找一种快速简便的方法来旋转标记,到目前为止,这对我来说是最好的选择。再次感谢您提供的工作示例。以上是关于在谷歌地图上显示风向的主要内容,如果未能解决你的问题,请参考以下文章