创建动态<Marker> <Popup>实例的React-leaflet问题

Question

我想动态创建一个react-leaflet对象。正常的leaflet对象可以工作，但react-leaflet不能。代码示例：https://codesandbox.io/s/show-problem-react-leaflet-marker-popup-object-hm0o8?file=/src/MapView.js

左键单击显示leaflet对象的所需行为，然后右键单击react-leaflet的问题。

问题代码：

var lat = e.latlng.lat;
var lon = e.latlng.lng;
// create popup contents
    
// use <Marker> from react-leaflet
var newMarker = <Marker position={[lat, lon]}>
  {/* use Edit Popup */}
  <Popup editable open>   
    Your stylable content here.
  </Popup>
</Marker>;
    
// Problem addTo(map) 
newMarker.addTo(map);

Answer 1

newMarker是一个react元素。不能对其调用leaflet方法addTo，因为它不是leaflet L.Marker实例。

如果您希望能够通过react管理标记，则需要保留一个状态变量，该变量是一个坐标数组。单击地图时，可以将坐标添加到该数组中，然后从中呈现一系列<Marker />元素。

在事件处理程序中，您只需捕获单击的位置并将其传递给回调setMarkers

function MyRightClickEventHandler({ setMarkers }) {
  useMapEvents({
    contextmenu: (e) => {
      setMarkers(e.latlng);
    }
  });
  return null;
}

setMarkers是主MapView组件上setState的回调，它将latlng添加到状态变量中，该变量包含一个latlngs数组

// inside you'r MapContainer:
<MyRightClickEventHandler
  setMarkers={(markers) =>
    this.setState({ 
      MarkerArray: [...this.state.MarkerArray, markers] 
    })
  }
/>

然后映射到该状态变量中的latlng(如果有)：

{this.state.MarkerArray &&
  this.state.MarkerArray.map((latlng) => (
    <Marker position={latlng}>
      <Popup editable removable>
        Thanks for using my editable popup plugin!
      </Popup>
    </Marker>
  ))}

Working codesandbox

请注意，如果您要在从数组动态呈现的可编辑弹出窗口上使用editable、removable或open道具，请务必阅读我在using editable popups rendered from a dynamic state array上的部分-如果您不小心，它可能会变得混乱。如果你遇到问题，请随时在评论中提问。