reactjs - 在按钮单击时添加折线

Question

我想在我的地图中添加一条折线，但似乎无法让它在按钮单击时呈现。这是我目前拥有的代码：

<button onClick={
                    function(){
                        console.log(asset.past);
                        var pathLine = new L.Polyline(asset.past, {
                        color: 'red',
                        weight: 3,
                        opacity: 0.5,
                        smoothFactor: 1
                      }
                    );
                    leafletMap.addLayer(pathLine);}
                  }
                  className="btn btn-info eachBtn">Go</button>

谢谢，埃德。

Answer 1

您似乎正在尝试在 react-leaflet 的上下文之外管理地图状态。我什至不确定你是在使用react-leaflet包还是试图推出你自己的恰好有传单的反应网站。

如果您确实在使用react-leaflet，则应该维护要在组件状态下呈现的折线列表或由父组件更新和发送的属性。然后，在您的渲染函数中，您将遍历这些折线并将它们中的每一个渲染为 react-leaflet 折线。

像这样的东西：

render() {
  return (
    <Map 
      center={[51.505, -0.09]} 
      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.polylines.map((positions, idx) => 
        <Polyline key={`polyline-${idx}`} positions={positions} />
      )}
    </Map>
  );
}

此外，请参阅此处的示例，该示例是在地图上单击点后添加标记的类似 react-leaflet 应用程序。