Question

使用传单，我创建了一个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可拖动？

Answer 1

正如您在其扩展的L.CircleMarker，L.Circle和L.Path规范中所看到的那样，CircleMarker根本就没有任何阻力。您现在拥有的选项是为L.Icon使用自定义L.Marker。以下是从传单网站获取的an example个自定义图标。

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

Answer 2

我将Leaflet.draw插件分叉以支持圆圈标记。你可以得到它here

我启用了这样的绘图：

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

您需要连接到地图的绘图：已创建的事件，以获取已添加的图层。

要启用拖动，只需获取已添加的图层并在其上启用编辑，如下所示：

pathToEdit.editing.enable();

Answer 3

您可以使用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
});

如何制作传单circleMarker可拖动？

3 个答案: