我计算了风向,现在我想显示指向 144 度的风向(在指南针上)。如何在 Google 地图上显示此箭头?
问问题
14337 次
1 回答
6
- 为了在谷歌地图上显示箭头,您可以使用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
}
);
于 2011-03-20T23:58:36.667 回答