Question

我的问题如下。我正在尝试向地图添加一些标记，并使它们可拖动。我使用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之后获取坐标，但是我不知道如何正确更新每个标记。.

我真的需要帮助... 谢谢你们

更新有关onDragEnd方法的标记数组

0 个答案: