如何使leaflet圆形标记可拖动？

Question

使用leaflet，我创建了一个L.circleMarker，并希望它可以被拖动：

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

很遗憾，当我拖动标记时，没有任何调用onMarkerDragStart/End函数的电话。但是，如果我们使用L.marker而不是L.circleMarker，它可以正常工作。

那么，有人知道如何使L.circleMarker可拖动吗？

- superrache

Answer 1

我将 Leaflet.draw 插件 fork 了一份，以支持圆形标记。你可以在这里获取它：here 我这样启用绘图功能：

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

您需要连接到地图的draw:created事件，以获取添加的图层。 要启用拖动，只需取出添加的图层，并像这样启用编辑：

pathToEdit.editing.enable();

- pk.

Answer 2

你可以使用 Leaflet Draw 插件，并在圆形标记上启用/禁用编辑。

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

如果您正在使用TypeScript，您可以使用：

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

这使你可以有效地编辑圆形标记，让你可以拖动圆形标记。

对于拖动事件，您可以参考Leaflet.Draw.Event.js中的绘制事件。

您可以像这样订阅map事件：

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

或者，您可以直接订阅circleMarker事件（editstart，editdrag，edit），如下所示：

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

- Xpleria

Answer 3

如您所见，在L.CircleMarker的规范中，以及它所继承的L.Circle和L.Path中，CircleMarker 没有拖动的功能。现在您可以使用自定义L.Icon来替代 L.Marker。这里是来自 Leaflet 网站的一个示例。

另一个选择是使用polydrag插件，但它是针对早期版本的Leaflet（0.4.2）开发的，而且没有得到维护。您可以查看该源代码并自行开发。

- iH8