将关闭按钮添加到React项目中Bing Maps的自定义HTML信息框中

Question

Bing Maps的示例为“ Custom HTML InfoBox”。具有讽刺意味的是，自定义的InfoBox中没有关闭按钮。除Bing Map API之一外，其他地图API（Google Map，MapBox等）的每个InfoBox（InfoWindow）都有一个默认关闭按钮，其中包含自定义HTML内容。没有关闭按钮很难关闭信息框。

因此，我必须在自定义HTML信息框中添加一个关闭按钮。以下是我正在编写的伪代码。我正在使用React + Next.js。

// MyInfoBox.js
export class MyInfoBox extends Component {
  constructor(props) {
    super(props);
    const { map, pos, events, children } = props;
    const htmlContent = renderToStaticMarkup(
      <div>
        <button onClick={events.close}>&#10006;</button>
        {children}
      </div>
    );
    const infoBox = new Microsoft.Maps.InfoBox(
      pos,
      htmlContent,
    );
    infoBox.setMap(map);
  }

  render() {
    return null;
  }
}

// index.js
export default () => <MyInfoBox events={{ close: () => console.log('close') }} />;

InfoBox仅将HTML作为内容参数（为什么不包含DOM元素？）。不幸的是，renderToStaticMarkup（或renderToString）将除“ onClick”以外的所有属性呈现为HTML。因此，当我们单击关闭按钮时，没有任何反应。

如何在React项目中为Bing Map的自定义HTML信息框编写可用的关闭按钮？

Answer 1

经过几天的调查，我发现了一个非常棘手的解决方案。我们必须向InfoBox注册事件处理程序，并检测事件的原始源。如果是关闭按钮，则调用相应的回调。

    Microsoft.Maps.Events.addHandler(this.#infoWindow, 'click', e => {
      if (e.originalEvent.target.id === closeButtonId) {
        events.close(e);
      }
    });

太棘手了。我们希望Bing Maps的InfoBox提供默认的关闭按钮（带有事件挂钩）。