元素的动态变化样式（DomIcon）

Question

我被卡住了，需要一些建议。我只想修改分配给此处地图中的 DomMarker 的 DomIcon。它是在 Angular / Ionic 中开发的，我只是想围绕锚点旋转 PNG。我只是在我的组件中创建了新元素。但是，独立于我如何设置转换它会立即被更新的转换矩阵覆盖。

    var theFather = document.createElement('div');
    var domElement = document.createElement('img')
    domElement.setAttribute('class', 'theThing')
    domElement.src ='./assets/icons/aThing.png'

    domElement.style.width = '40px';
    domElement.style.height = '40px';

    theFather.appendChild(domElement);

我尝试了论坛中讨论的各种替代方法来旋转这个东西，但我总是失败。显然，我在试验中完全错过了一些东西。

所以， 1) 尝试通过在附加回调中设置 cssText 或克隆的 png img (DomIcon) 的 style.transform 来简单地 transform:rotate。它在同一点上正确旋转，但仅当 clonedElement 在 onAttach 回调中旋转时才会旋转。糟糕的是，我无法通过不是 DOM 或此处 API 事件的外部事件更新 clonedElement。正确的？

  var domIcon = new H.map.DomIcon(domElement, {
    onAttach: function(clonedElement, domIcon, domMarker) {
      clonedElement.addEventListener('mouseover', rotateThisThing);
}

2) 试图简单地旋转原始 PNG，但这根本没有改变。我可以看到 cssText 已更新且正确，但未在地图上呈现。

domIcon.c.style.cssText += 'transform: rotate(90deg)';

3) 试图通过计算 transform:matrix 中的旋转来设置元素样式属性，它可以正确旋转图标并在文档本身中设置，但不幸的是，这是非常不稳定的。

document.getElementsByTagName("img")[i].style.cssText += 'transform: ' + newval;

4) 尝试将元素样式属性设置为 3) 但使用 renderer2

this.render2.setStyle(document.getElementsByClassName("theThing")[i],"transform",newval)

5) 试图导出一个新的 CSS 变量并直接在 CSS 中旋转。

 this.mapElement.nativeElement.style.setProperty('--the-rotator', value);

我在这里错过了什么？非常感谢您的建议？

非常感谢， O.

Answer 1

API 通过更改克隆的 Dom 元素的变换样式属性来操纵标记的位置。在您的例子中，onAttach 回调中的 clonedElement 是 theFather 的克隆。因此，您的 onAttach 回调应该看起来像像这样：

var domIcon = new H.map.DomIcon(domElement, {
    onAttach: function(clonedElement, domIcon, domMarker) {
      clonedElement.getElementsByTagName("img")[i].style.transform = 'rotate(90deg)'
}

您可以查看下面的示例代码，它每 1 秒旋转一次箭头 Dom标记。查看如何将对克隆元素的引用分配给 clonedElement 变量，然后在 setInterval 函数中使用该变量。

var domIconElement = document.createElement('div'),
    domIconContent = document.createElement('div'),
    marker,
    clonedContent,
    counter = 0;

domIconContent.classList.add('dom-icon-content')
domIconContent.innerHTML = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40" height="40">
    <path d="m0.812665,23.806608l37.937001,-22.931615l-21.749812,38.749665l1.374988,-17.749847l-17.562177,1.931797z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#fff"/>
  </svg>`;
domIconElement.appendChild(domIconContent);

marker = map.addObject(new H.map.DomMarker(map.getCenter(), {
  icon: new H.map.DomIcon(domIconElement, {
    onAttach: function(clonedElement, domIcon, domMarker) {
      clonedContent = clonedElement.getElementsByClassName('dom-icon-content')[0];
    }
  })
}));

setInterval(function() {
    if (clonedContent) {
        clonedContent.style.transform = 'rotate(' + (counter += 45) + 'deg)';
    }
}, 1000)

元素的动态变化样式（DomIcon）

dynamic change style of an element (DomIcon)

css

here-api