如何使用mapbox LeafLet

时间:2016-05-06 11:18:08

标签: javascript reactjs leaflet mapbox

我创建了自定义创建标记按钮,并点击了我在地图上添加标记。

我可以拖动那张地图,但是很多时候拖拉它的LatLng很多。 我想在标记拖动事件上获得latlng .Below是我创建标记的代码。

this.map.on('draw:created', function(e) {
        e.layer.options.draggable = true;
        this.drawnItems.addLayer(e.layer);
        this.props.markerCoordinates(e.layer._latlng);
        this.mapState = MAP_STATE.NONE;
        mapSearch.searchByLocation(e.layer._latlng, this.getLocation);
        this.setState({
            drawActiveClass: 'polygonAction clearfix',
        });
    }.bind(this));

    drawMarker: function() {
    if(this.mapState === MAP_STATE.DRAW) {
        return;
    }
    this.drawnItems.clearLayers();
    this.mapState = MAP_STATE.DRAW;
    this.drawHandler = new L.Draw.Marker(this.map,this.drawControl.options.draw.marker);
    this.drawHandler.enable();
    this.setState({
        drawActiveClass: 'polygonAction clearfix active',
        createMarkerErrorClass: 'hide'
    });
}

render: function() {
     <li className={this.state.drawActiveClass} ref="drawMarker" onClick={this.drawMarker}>
          <span className="drawAction">{this.props.drawAction}</span>
     </li>
}

在标记创建时,我正在使其可拖动。 但是如何为它添加拖动事件。

1 个答案:

答案 0 :(得分:0)

我刚刚在创建的事件中添加了dragend事件列表器。

  this.map.on('draw:created', function(e) {
        e.layer.options.draggable = true;
        e.layer.on('dragend',function(e) {
            mapSearch.searchByLocation(e.target.getLatLng(),this.getLocation);
        }.bind(this));
        this.drawnItems.addLayer(e.layer);
        this.props.markerCoordinates(e.layer._latlng);
        this.mapState = MAP_STATE.NONE;
        mapSearch.searchByLocation(e.layer._latlng, this.getLocation);
        this.setState({
            drawActiveClass: 'polygonAction clearfix',
        });
    }.bind(this));