DOM标记的锚定和旋转 [英] Anchor and rotation for DOM marker

问题描述

我可以在此处的地图API中将旋转设置为DOM标记的CSS.但是，我无法设置锚点.这将导致自旋的起源偏离标记的协调.参见下图:

I can set the rotation to the css of the DOM marker in here map api. However, I can't set the anchor. That would lead to the origin of the spin deviate from the coordination of the marker. See the picture below:

如何解决?

相关代码如下:

import { renderToStaticMarkup } from 'react-dom/server';
import { PositionToLatLng } from './utils';

export class DomMarker {
  constructor(map, options) {
    const { position, children, angle, ...others } = options;
    this.marker = new H.map.DomMarker(PositionToLatLng(position), {
      icon: new H.map.DomIcon(renderToStaticMarkup(
        <div>
          <div
            style={{
              transform: `rotate(${angle}deg)`,
              cursor: 'pointer'
            }}
          >
            {children}
          </div>
        </div>
      )),
    });
    this.map = map;
    this.map.addObject(this.marker);
  }

  remove() {
    this.map.removeObject(this.marker);
  }
}

它与"renderToStaticMarkup"一起使用.但是，如果我使用"renderToDiv"，它什么也不会渲染.

It works with "renderToStaticMarkup". But it renders nothing if I use "renderToDiv".

import ReactDOM from 'react-dom';

export function renderToDiv(element) {
  const content = document.createElement('div');
  ReactDOM.render(element, content);
  return content;
}

我打印"renderToDiv"的返回值，如下所示:

I print the return value of "renderToDiv", it looks like the following:

推荐答案

anchor参数仅适用于H.map.Icon.使用CSS样式将H.map.DomIcon居中.

The anchor parameters only works for H.map.Icon. Use CSS styles to center an H.map.DomIcon.

假设您的图标的宽度和高度为24px:

Assuming your icon is 24px width and height:

<div style="left: -12px; top: -12px;">
   // icon content
</div>

这篇关于DOM标记的锚定和旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！