как применить метод transform к Placemark

Question

Разместил свою картинку на карте, и хочу повернуть на заданный угол:

 var placemark4 = new ymaps.Placemark([56.23901161240372,43.44469719054045], {
        hintContent: 'Собственный значок метки',
        iconContent: 'Это красивая метка'
    }, 
    {
         // Опции.
        // Необходимо указать данный тип макета.
        iconLayout: 'default#image',
        // Своё изображение иконки метки.
        iconImageHref: 'img/icon.png',
        // Размеры метки.
        iconImageSize: [50, 52],
    });
    myMap.geoObjects.add(placemark4);
            
    var x = 90;
    placemark4.style.transform = 'rotate(' + x + 'deg)';

увы, это не прокатило((( Получил: Uncaught TypeError: Cannot read properties of null (reading 'style') Как быть?

Answer 1

style.transform можно применить только к html-элементам :)

Используя шаблонизатор, вы можете обернуть вашу метку в div, и применить трансформацию уже к нему (пример ниже кликабельный):

ymaps.ready(function() {
  var myMap = new ymaps.Map('map', {
    center: [56.23901161240372, 43.44469719054045],
    zoom: 9
  })

  var placemark4 = new ymaps.Placemark([56.23901161240372, 43.44469719054045], {
    hintContent: 'Собственный значок метки',
    iconContent: 'Это красивая метка'
  }, {
    // Опции.
    // Необходимо указать данный тип макета.
    iconLayout: ymaps.templateLayoutFactory.createClass([
      '<div style="transform:rotate({{options.rotate}}deg);">',
      '{% include "default#image" %}',
      '</div>'
    ].join('')),

    // Своё изображение иконки метки.
    iconImageHref: 'https://sandbox.api.maps.yandex.net/examples/ru/2.1/icon_customImage/images/myIcon.gif',
    // Размеры метки.
    iconImageSize: [30, 42],
    // Смещение левого верхнего угла иконки относительно
    // её "ножки" (точки привязки).
    iconImageOffset: [-5, -38],
    iconRotate: 90,
  });

  myMap.geoObjects
    .add(placemark4);
});

<div id="map"></div>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<style>
        html, body, #map {
            width: 100%; height: 100%; padding: 0; margin: 0;
        }
</style>

БЛОГ НА HUSL

как применить метод transform к Placemark

Ответы (1 шт):