通过使用很棒的字体自定义反应传单标记图标

Question

这是理论上的问题，而不是问题。

如何使用真棒字体图标作为React-leaflet地图标记图标？

我想要一个这样的图标选择器控件来分配（自定义）我在地图上获得的每个标记图标。顺便说一下，我正在使用Map和Marker的JSX组件。

有可能实现这一目标吗？

有人对此有样品笔吗？我确实在Google上进行了强烈的搜索，但是除了一个仅可与Leaflet 1.0一起使用的fontawesome插件之外，找不到任何插件。

因此，任何想法表示赞赏。

提前致谢。

Answer 1

对于那些已经使用 Fontawesome (FontAwesomeIcon) 的 React 组件的人来说，有一个解决方案，不需要再次通过 CDN 导入。它使用与 Murli 的答案相同的原理，但<i className=" fa fa-map-marker-alt fa-3x" />您可以将 FontAwesomeIcon 组件转换为 html 并将其传递到 divIcon 的 html 属性中，而不是添加 。它看起来像这样（改编了已接受答案的示例）：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ReactDOMServer from 'react-dom/server';
import Leaflet from 'leaflet'
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import './styles.css';

// FontAwesome requirements
import { faUserAstronaut } from '@fortawesome/free-solid-svg-icons'
library.add(faUserAstronaut)

class App extends Component {
  state = {
    lat: 51.505,
    lng: -0.091,
    zoom: 13,
  };

  render() {
    const position = [this.state.lat, this.state.lng];
    const iconHTML = ReactDOMServer.renderToString(<FontAwesomeIcon icon='user-astronaut' />)
    const customMarkerIcon = new Leaflet.DivIcon({
      html: iconHTML,
    });

    return (
      <Map center={position} zoom={this.state.zoom}>
        <TileLayer
          attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
          url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
        />
        <Marker position={position} icon={customMarkerIcon}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </Map>
    );
  }
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

Answer 2

由于某些原因，代码未格式化。查看代码沙箱上的代码

这是如何使用超棒字体图标作为标记的方法。

1. 将超棒的CDN添加到您的 index.html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

2. 使用divIcon连同renderToStaticMarkup从react-dom/server生成图标标记。而通过这个divIcon来Marker作为icon道具。

   import React, { Component } from 'react';
   import ReactDOM from 'react-dom';
   import { renderToStaticMarkup } from 'react-dom/server';
   import { divIcon } from 'leaflet';
   import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
   
   import './styles.css';
   
   class App extends Component {
     state = {
       lat: 51.505,
       lng: -0.091,
       zoom: 13,
     };
   
   render() {
       const position = [this.state.lat, this.state.lng];
       const iconMarkup = renderToStaticMarkup(<i className=" fa fa-map-marker-alt fa-3x" />);
       const customMarkerIcon = divIcon({
         html: iconMarkup,
       });
   
       return (
         <Map center={position} zoom={this.state.zoom}>
           <TileLayer
             attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
             url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
           />
           <Marker position={position} icon={customMarkerIcon}>
             <Popup>
               A pretty CSS3 popup. <br /> Easily customizable.
             </Popup>
           </Marker>
         </Map>
       );
     }
   }
   
   const rootElement = document.getElementById('root');
   ReactDOM.render(<App />, rootElement);
   

3. 通过将以下类添加到CSS文件中来覆盖divIcon默认样式

   .leaflet-div-icon {
       background: transparent;
       border: none;
   }  
   

   • 这是相同的工作示例：https :
     //codesandbox.io/s/4ry180jl34