在 angular-leaflet-directive 中旋转标记

Question

编辑：我不关心如何修复我的 code/why 它的行为就像那样，我只想在 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] 旋转，而不是它们的左下角或任何其他点。

Answer 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>",
});

它不漂亮，但它有效。

在 angular-leaflet-directive 中旋转标记

Rotate marker in angular-leaflet-directive

javascript

rotation

angularjs

leaflet

angular-leaflet-directive