最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to make a leaflet circleMarker draggable? - Stack Overflow

programmeradmin2浏览0评论

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?

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?

Share Improve this question asked Nov 21, 2014 at 12:50 superrachesuperrache 67012 silver badges28 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 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();

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.

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
});

Another approach is to track the mouse location via Map mousemove event, and put a custom marker on top of the mouse position (make it invisible if you want with opacity: 0), then capture the marker's drag events and link them to the circle or other none draggable ponent. Demo project.

发布评论

评论列表(0)

  1. 暂无评论