单击地图时如何在反应传单中使用字体真棒作为标记？

【问题标题】：how to use font awsome as a marker in react leaflet when click on map?单击地图时如何在反应传单中使用字体真棒作为标记？
【发布时间】：2019-07-02 07:08:15
【问题描述】：

我使用 react-leaflet 包，当用户点击地图点时，我需要添加自定义字体。比如当一个地方是地铁时，图标变成地铁图标等等。我的意思是用户点击地图时选择图标，或者点击地图时添加图标。

【问题讨论】：

标签： reactjs dictionary react-leaflet

【解决方案1】：

试试这样吧？

import { Marker } from "react-leaflet";
import { divIcon } from "leaflet";
import { renderToStaticMarkup } from "react-dom/server";

class MyCustomMarker extends React.Component {

  generateMarkerContent = fontAwesomeConfig => {
    const { fontAwesomeConfig } = this.props;
    return (
      <div className="my-custom-icon-content">
        {/* Render based on the font awesome config here */}
      </div>
    );
  };

  render(){
    const icon = divIcon({
      className: "my-custom-icon",
      iconSize:[24, 24],
      html: return renderToStaticMarkup(this.generateMarkerContent(t))
    });

    return (
      <Marker {...this.props} icon={icon} />
    )
  }
}

【讨论】：