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

Question

我想动态创建一个 react-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 是反应元素。您不能在其上调用传单方法 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] 
    })
  }
/>

然后映射该状态变量中的经纬度，如果有的话：

{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 - 如果你不小心，它会变得毛茸茸的。如果您运行遇到问题，请随时在评论中提问。

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

React-leaflet problem to create <Marker> <Popup> instance dynamic