在按钮上点击添加折线

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，则应该维护要在组件状态中呈现的多段折线列表或由父组件更新并发送的属性。然后，在渲染函数中，您将遍历这些折线，并将它们中的每一个渲染为反折小折线。

事情是这样的：

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> 
); 
} 

而且，看到的例子，增加了标记被点击地图上的点之后，类似的反应小叶的应用over here。