React Leaflet：更新状态中多个标记的坐标

Question

我似乎无法弄清楚如何在将单个标记存储在状态后正确更新它们的坐标。目前它是如何工作的，当你点击地图上的某个地方时，它会添加一个标记并将其初始位置存储在状态（在 markerData 中）中，然后通过地图功能显示在地图上。您可以四处移动各个标记，但我很难找到更新特定标记位置的可能解决方案，以便最终我可以在后端发送和存储标记信息。

这是我当前的代码。

import React, { Component } from 'react';
import { ImageOverlay, Map, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet/dist/leaflet.js';
import L from 'leaflet';

delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    iconUrl: require('leaflet/dist/images/marker-icon.png'),
    shadowUrl: require('leaflet/dist/images/marker-shadow.png')
});

export default class CustomMapExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      center: {
        lat: 512,
        lng: 1024,
      },
      zoom: 1,
      draggable: true,
      dimensions: [1024, 2048],
      markerData: [],
    };
  }

  toggleDraggable = () => {
    this.setState({ draggable: !this.state.draggable })
  }

  addMarker = (event) => {
    const {markerData} = this.state
    const coords = event.latlng
    markerData.push(coords)
    this.setState({markerData})
  }

  updateMarker = (event) => {
    console.log(event)
  }

  render () {
    const boundOrigin = [0, 0];
    const bounds = [boundOrigin, this.state.dimensions];
    const position = [this.state.center.lat, this.state.center.lng]

    return (
      <div>
        <Map
          id="map"
          crs={L.CRS.Simple}
          minZoom={-1}
          bounds={bounds}
          center={position}
          zoom={this.state.zoom}
          onClick={this.addMarker}
          >
          <ImageOverlay
            url='http://www.online-tabletop.com/wp-content/uploads/2017/01/tutoriala.jpg'
            bounds={bounds}
            />
          {this.state.markerData.map((element, index) =>
            <Marker
              key={index}
              position={element}
              draggable={this.state.draggable}
              onDragend={this.updateMarker}
              >
              <Popup>
                <span onClick={this.toggleDraggable}>
                  {this.state.draggable ? `Hello` : 'MARKER FIXED'}
                </span>
              </Popup>
            </Marker>
          )}
        </Map>
      </div>
    );
  }
}

Answer 1

由于Marker接受选项对象作为第二个参数，可以引入标记索引来引用哪个标记正在获取更新：

<Marker
    key={index}
    marker_index={index}
    position={element}
    draggable={this.state.draggable}
    onDragend={this.updateMarker}
 />

然后 markerData 一旦标记被拖动，状态可以像这样更新：

updateMarker = event => {
   const latLng = event.target.getLatLng(); //get updated marker LatLng
   const markerIndex = event.target.options.marker_index; //get marker index
   //update 
   this.setState(prevState => {
     const markerData = [...prevState.markerData];
     markerData[markerIndex] = latLng;
     return { markerData: markerData };
   });
};

Demo

React Leaflet：更新状态中多个标记的坐标

React Leaflet: Updating coords of multiple markers in state

react-leaflet