带有标记和弹出窗口的 React-leaflet 应用程序

Question

我的 React-leaflet 应用程序有一些问题。 我使用“leaflet-contextmenu”、“react-leaflet-editable-popup”作为组件。 应用程序应通过上下文菜单在 map 上启用各种操作。 设置和 label 标记。 更改标记的图标、移动标记等。

也许有人会看到解决方案：

1. 标记数据存储在一个数组（MarkerArray）中。 如果要通过标记的上下文菜单执行操作，则必须在 MarkerArray 中找到条目。 无法通过 leaflet 上下文菜单的回调直接进入条目。 我正在使用一种解决方法并使用地理坐标搜索数组中的条目。 这很慢并且容易出错。 是否有可能将条目或索引直接提供给回调？

代码：

 contextmenuItems = {[
                {
                  text: "Delete marker",
                  callback: this.delMarker
                  // onClick = {() => this.delMarker (index)}
                },

2. 添加标记移动 map。 movestart 和 moveend 事件被触发。 是否可以停用添加标记的事件？

3. 如果我移动一个标记，地理坐标自然会改变。 更新 MarkerArray 中地理坐标的最简单方法是什么？

我的示例应用程序位于： https://codesandbox.io/s/gistool2-forked-4ry2w?file=/src/MapView.js