React Leaflet: Обновление координат нескольких маркеров в состоянии - PullRequest
Новая
       8

React Leaflet: Обновление координат нескольких маркеров в состоянии

0 голосов
/ 16 ноября 2018

Я не могу понять, как правильно обновить координаты отдельных маркеров после сохранения их в состоянии. В настоящее время это работает так: когда вы щелкаете где-то на карте, он добавляет маркер и сохраняет свое начальное положение в состоянии (в 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>
    );
  }
}

1 Ответ

0 голосов
/ 17 ноября 2018

Поскольку 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 };
   });
};

Демо

...