Here api H.ui.Control与React

我希望添加一个带有H.ui.Control的react元素。这可能吗？那怎么做呢

// sudo code of what I did
componentDidMount() {
  ...
  let button = new H.ui.Control(this.myButtonControl);
  button.setPosition('top-left');
  this._ui.addControl('button-control', button);
  ...
}

myButtonControl() {
  return <button className="H_btn">Hello World</button>
}

//我所做的sudo代码
componentDidMount（）{
...
let button=新的H.ui.Control（this.myButtonControl）；
按钮。设置位置（“左上”）；
此._ui.addControl（'button-control'，button）；
...
}
myButtonControl（）{
返回你好世界
}

---

一个新的

，出现在控件应该位于的位置，而不是按钮。

虽然这不是我想要做的，但我确实找到了解决方案。我创建了一个扩展

H.ui.Control

的泛型类，在本例中是ButtonGroupControl

class ButtonGroupControl extends H.ui.Control {
  constructor(buttons: []) {
    super();
    this._buttons = buttons;
    this.addClass('H_grp');
  }

  renderInternal(el, doc) {
    this._buttons.forEach((button, i) => {
      let btn = doc.createElement('button');
      btn.className = 'H_btn';
      btn.innerText = this._buttons[i].label;
      btn.onclick = this._buttons[i].callback;
      el.appendChild(btn);
    })
    super.renderInternal(el, doc);
  }
}

export default ButtonGroupControl;

然后，在我的map组件中，我创建了传入控件的项数组，如下所示：

const mapToolsControl: ButtonGroupControl = new ButtonGroupControl([
    {
        label: 'Add Field',
        callback: () => {
          console.log('callback: adding field');
        }
    },
    {
        label: 'Remove Field',
        callback: () => {
          console.log('callback: remove field');
        }
    }
]);

最后，我将控件添加到地图中，如下所示：

this._map.addControl('map-tools-control', mapToolsControl);

这将导致以下结果（这是一个链接，因为我还没有足够的点来嵌入）：

以下是我所做的（在地图上添加两个按钮）

渲染是由css完成的（这里是一个摘录）

• H.ui.base.Button（）不工作。。。它创建一个div

• 无法通过api向

  按钮添加属性，例如
  alt
  或
  title

• 我还得处理addEventListener。。。（不工作！）

结果是：

var U_I = new H.ui.UI(map);

var container = new H.ui.Control();
container.addClass('here-ctrl here-ctrl-group');

var button = new H.ui.base.Element('button', 'here-ctrl-icon map_control');
container.addChild(button);
button.addEventListener('click', function() { alert(1); });

var button = new H.ui.base.Element('button', 'here-ctrl-icon map_center');
container.addChild(button);
button.addEventListener('click', function() { alert(2); });

container.setAlignment('top-right');

U_I.addControl('myControls', container );
U_I.addControl('ScaleBar', new H.ui.ScaleBar() );

button.here-ctrl-icon {
    width: 25px;
    height: 25px;
    margin: 2px 0 0 2px;
}

.map_control { background: url("images/map_control.png") no-repeat scroll 0 0 transparent; }
.map_center  { background: url("images/map_center.png")  no-repeat scroll 0 0 transparent; }