0

編集:コードを修正する方法/そのように動作する理由は気にしません。角度リーフレットディレクティブでマーカーをその中心を中心に回転させたいだけです。

ここでの質問は承知していますが、すべてのマーカーの DOM 要素を取得する方法がわかりません。私がマーカーを作成している方法は、

$rootScope.markers.push(
            {
                lng : 23.8404236,
                lat : 38.04595,
                icon: {
                    iconUrl : url,
                    iconSize: [30, 30]
                }
            }
        );

また、先端 (リーフレットの用語では左上隅) ではなく、対応する座標を中心に回転させたいと考えています。

私は現在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] を中心に回転させたい。

4

1 に答える 1

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

きれいではありませんが、機能します。

于 2015-10-30T11:59:29.270 に答える