在角度传单指令中旋转标记
Posted
技术标签:
【中文标题】在角度传单指令中旋转标记【英文标题】:Rotate marker in angular-leaflet-directive 【发布时间】:2015-10-30 08:43:16 【问题描述】:编辑:我不在乎如何修复我的代码/为什么它会这样,我只想围绕它的中心旋转 angular-leaflet-directive 中的标记。
我知道the question here,但我不知道如何获取每个标记的 DOM 元素。我创建标记的方式是
$rootScope.markers.push(
lng : 23.8404236,
lat : 38.04595,
icon:
iconUrl : url,
iconSize: [30, 30]
);
我还想围绕它们对应的坐标旋转它们,而不是它们的尖端(Leaflet 术语中的最左上角)。
我目前正在使用Marker.Rotate.js,但它们围绕某个任意点旋转,如您在此处看到的:
他们的代码是:
$rootScope.markers.push(
lng : 23.8404236,
lat : 38.04595,
icon :
iconUrl : 'misc/images/debug3.png',
iconSize: [30, 30]
,
iconAngle: 30
);
$rootScope.markers.push(
lng : 23.8404236,
lat : 38.04595,
icon:
iconUrl : url,
iconSize: [30, 30]
);
$rootScope.markers.push(
lng : 23.8404236,
lat : 38.04595,
);
原始图片的尺寸为 120x120,因此可以缩小到 30x30。另外我没有设置锚点,因为给定大小,它会自动设置到中间(我猜是[15,15]) - 即使我设置了锚点,结果也是一样的。
我希望标记围绕它们的 [15,15] 旋转,而不是它们的左下角或其他任何点。
【问题讨论】:
【参考方案1】:我这样破解了答案:
$rootScope.markers.push(
icon :
type : 'div',
className : 'marker-default',
html : '<img style="transform-origin: center 20px; transform: rotate('+rotation+'deg)" src="'+url+'">',
iconAnchor: [12, 20]
,
lat : parseFloat(DeviceData[i].Position.Y),
lng : parseFloat(DeviceData[i].Position.X),
message : "<div ng-include src=\"'templates/markerTemplate.html'\" ng-controller=\"markerBaseController\" data-deviceiterator=" + i.toString() + "></div>",
);
它不漂亮,但它有效。
【讨论】:
以上是关于在角度传单指令中旋转标记的主要内容,如果未能解决你的问题,请参考以下文章
Here maps iOS SDK:旋转Here maps中的标记