обновить массив маркеров, касающихся метода onDragEnd - PullRequest
Новая
       18

обновить массив маркеров, касающихся метода onDragEnd

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

Моя проблема заключается в следующем.Я пытаюсь добавить некоторые маркеры на карту и сделать их перетаскиваемыми.я добавляю маркеры с помощью метода onclick (код будет приведен ниже), но моя проблема в том, что я не знаю, как обновить координаты маркеров с помощью метода onDragEnd ... Я отображаю маркеры с помощью карты, поскольку число маркеров не является фиксированным.это зависит от клика пользователя. 

export default class Map extends Component {
   constructor(props) { 
   super(props);

    this.state = {
      viewport: {
        latitude: 35.82004085,
        longitude: 139.58855534,
        zoom: 17,
        bearing: 0,
        pitch: 0
      },
      markers:{
        "type": "MarkerColection",
        "markersList":[]
      },
      events: {},
      movingMarker:[]
    };
  }  // end construstor

_updateViewport = viewport => this.setState({
viewport:{...this.setState.viewport, ...viewport}
});


_logDragEvent(name, event) {
  this.setState({
     events: {
     ...this.state.events,
     [name]: event.lngLat,
     }
  })
 }

_onMarkerDragStart = (event) => {
   this._logDragEvent('onDragStart', event);
};

_onMarkerDrag = (event) => {
  this._logDragEvent('onDrag', event);
};

_onMarkerDragEnd = (event) => {
  this._logDragEvent('onDragEnd', event);

  var newMovingMarker= [
      event.lngLat[0],
      event.lngLat[1]
    ];

  ///////HERE I WOULD LIKE TO UPDATE THE MARKER POSITION///
  ///////WITH THIS COORDINATES!!!!!////////////////////////
  /////////////////////////////////////////////////////////
  this.setState({movingMarker: newMovingMarker});
 };



_renderMarker = (marker, index) => {
  const {movingMarker} = this.state;
  return (
    <Marker 
        key={`marker-${index}`}
        latitude={marker.coordinates[1]} 
        longitude={marker.coordinates[0]}
        offsetLeft={-10} 
        offsetTop={-10}
        draggable={true}
        onDragStart={this._onMarkerDragStart}
        onDrag={this._onMarkerDrag}
        onDragEnd={this._onMarkerDragEnd} 
        >
        <span class='glyphicon glyphicon-flag'></span>
      </Marker>

  );
 }

onMapClick = event => {


    var coord = event.lngLat;
    const {markers} = this.state;

    var marker = {
      "type":"marker",
      "coordinates": [
        coord[0],
        coord[1]
      ],
     "properties": {
        "id": String(new Date().getTime())
     }
   };  

   markers.markersList.push(marker);

  this.setState({markers: markers});

};  // end of onMapClick

render() {
  const {viewport, markers} = this.state;



  return(
    <MapGL
      {...viewport}
      width="100%"
      height="100%"
      mapStyle= "mapbox://styles/mapbox/streets-v10"
      mapboxApiAccessToken={TOKEN}
      onViewportChange={this._updateViewport}
      onClick={this.onMapClick}>

      {markers.markersList.map(this._renderMarker) }

      <div className="nav" style={navStyle}>
      <NavigationControl onViewportChange={this._updateViewport} />
      </div>
    </MapGL>


  );  // end of return

 }  // end of render
 }

Я могу получить координату после onDragEnd, но я не знаю, как правильно обновить каждый маркер .....

Мне действительно нужна помощьэто ... Спасибо, ребята

...