Anchor and rotation for DOM marker

问题

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:

How to resolve it?

The relevant code is like the following:

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

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;
}

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

回答1:

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

Assuming your icon is 24px width and height:

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

来源：https://stackoverflow.com/questions/58786541/anchor-and-rotation-for-dom-marker