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接受 options对象作为第二个参数，因此可以引入标记索引来引用要更新哪个标记：

<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：更新状态中的多个标记的坐标

1 个答案: