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

如何解决React-leaflet 问题以动态创建 <Marker> <Popup> 实例

我想动态创建一个 react-leaflet 对象。正常的传单对象有效，但 react-leaflet 无效。 代码示例： https://codesandbox.io/s/show-problem-react-leaflet-marker-popup-object-hm0o8?file=/src/MapView.js

左键单击显示传单对象所需的行为，然后右键单击 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);

解决方法

newMarker 是一个反应元素。您不能对其调用传单方法 addTo，因为它不是传单 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] 
    })
  }
/>

然后映射处于该状态变量中的 latlngs，如果有的话：

{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 道具，请务必阅读我关于 {{ 3}} - 如果你不小心，它会变得毛茸茸的。如果您遇到问题，请随时在评论中提问。