How to make a leaflet circleMarker draggable?

问题

Using leaflet, I created a L.circleMarker and I want it to be draggable:

var marker = L.circleMarker(new L.LatLng(48.94603, 2.25912), {
    draggable: true
})
.bindPopup('Circle marker draggable')
.addTo(map)
.on('dragstart', onMarkerDragStart)
.on('dragend', onMarkerDragEnd);

Unfortunately, I don't get any call of onMarkerDragStart/End functions when I drag the marker. However, if we use L.marker instead of L.circleMarker, it works.

So, does anyone know how to make the L.circleMarker draggable?

回答1:

I forked the Leaflet.draw plugin to support circle markers. You can get it here

I enable the drawing like this:

drawCircleMarker: function () {
            this.currentHandler = new L.Draw.CircleMarker(this.map, this.drawControl.options.circleMarker);
            this.currentHandler.enable();
        },

You will need to hook up to the map's draw:created event in order to get the layer that was added.

To enable dragging, simply take that layer that was added and enable editing on it like this:

pathToEdit.editing.enable();

回答2:

As you can see in the specification for L.CircleMarker, L.Circle and L.Path which it extends from, there is simply no drag for a CircleMarker. The option you now have is to use a custom L.Icon for L.Marker. Here is an example of custom icons taken from the Leaflet site.

Another option is to use this polydrag plugin, but it's developed against an early version of Leaflet (0.4.2) and isn't being maintained. You could always take a look at that source and roll your own.

回答3:

You can use the Leaflet Draw plugin and enable/disable editing on the circle marker.

circleMarker.editing.enable();
circleMarker.editing.disable();

If you're using TypeScript, you can use

circleMarker['editing'].enable();
circleMarker['editing'].disable();

This lets you edit the circle marker effectively letting you drag the circle marker around.

And for drag events, you can refer to draw events in Leaflet.Draw.Event.js.

You can subscribe to map events like this:

map.on('draw:editmove', (event) => {
    // Do something
});

Or, directly subscribe to circleMarker events (editstart, editdrag, edit) like this:

circleMarker.on('editdrag', (event) => {
    // Do something
});

来源：https://stackoverflow.com/questions/27061820/how-to-make-a-leaflet-circlemarker-draggable

标签

javascript

drag-and-drop

leaflet