EDIT: Мне все равно, как исправить мой код/почему он так себя ведет, я просто хочу повернуть маркер в директиву с угловым листом, вокруг его центра.
Я знаю вопрос здесь, но я понятия не имею, как получить элемент 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], а не их нижнего левого угла или любой другой точки.
Я взломал ответ так:
$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>",
});
это не очень, но это работает.