React Leaflet：动态添加标记

为了最大程度地利用 react -leaflet，您应该考虑如何设计地图呈现方式，以使react生命周期能够处理点击和标记显示。React-
leaflet可为您处理几乎所有的传单工作。

您应该使用组件的状态或道具来跟踪组件正在显示的标记。因此，

L.marker

<Marker>

点击地图后，以下是添加标记的反应方式：

class SimpleExample extends React.Component {  constructor() {    super();    this.state = {      markers: [[51.505, -0.09]]    };  }  addMarker = (e) => {    const {markers} = this.state    markers.push(e.latlng)    this.setState({markers})  }  render() {    return (      <Map         center={[51.505, -0.09]}         onClick={this.addMarker}        zoom={13}         >        <TileLayer          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'        />        {this.state.markers.map((position, idx) =><Marker key={`marker-${idx}`} position={position}>          <Popup> <span>A pretty CSS3 popup. <br/> Easily customizable.</span>          </Popup>        </Marker>        )}      </Map>    );  }}

这是一个jsfiddle：https
://jsfiddle.net/q2v7t59h/413/