首页 > 解决方案 > 带有标记和弹出窗口的 React-leaflet 应用程序

问题描述

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

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

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

代码:

 contextmenuItems = {[
                {
                  text: "Delete marker",
                  callback: this.delMarker
                  // onClick = {() => this.delMarker (index)}
                },
  1. 添加标记移动地图。movestart 和 moveend 事件被触发。是否可以停用添加标记的事件?

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

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

标签: leafletpopupcontextmenumarkerreact-leaflet

解决方案


推荐阅读