Leaflet-Draw 标记不能与自定义控件一起正常工作

Question

我正在使用 Leaflet Draw，我创建了一个自定义控件而不是默认控件。

在我的自定义控件中，一切正常（折线、多边形、圆形和矩形），除了标记。
当我单击“标记”菜单项时，标记立即放置在菜单后面的位置，而不是让我选择将其拖到地图上并选择位置（见下文错误与预期）。

我该如何解决这个问题？

HTML代码：

<div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           <i class="fa fa-pencil"></i> Drawing tools <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#" onclick="draw('polyline')">Line</a></li>
            <li><a href="#" onclick="draw('polygon')">Polygon</a></li>
            <li><a href="#" onclick="draw('rectangle')">Rectangle</a></li>
            <li><a href="#" onclick="draw('circle')">Circle</a></li>
            <li><a href="#" onclick="draw('marker')">Marker</a></li>
        </ul>
</div>

Javascript 函数：

function draw(type) {

    var po = '';
    switch(type) {
        case 'polygon':
            po = new L.Draw.Polygon(map);
            break;
        case 'polyline':
            po = new L.Draw.Polyline(map);
            break;
        case 'rectangle':
            po = new L.Draw.Rectangle(map);
            break;
        case 'circle':
            po = new L.Draw.Circle(map);
            break;
        case 'marker':
            po = new L.Draw.Marker(map);
            break;
    }
    po.enable();
}

谢谢，抱歉我的英语不好！

Answer 1

尝试跟随标记

po = new L.Draw.Marker(map, { draggable : true});

Answer 2

用 stopPropagation 解决了这个问题：

HTML代码：

<div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           <i class="fa fa-pencil"></i> Drawing tools <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#" class="draw-tool" data-draw='polyline'>Line</a></li>
            <li><a href="#" class="draw-tool" data-draw='polygon'>Polygon</a></li>
            <li><a href="#" class="draw-tool" data-draw='rectangle'>Rectangle</a></li>
            <li><a href="#" class="draw-tool" data-draw='circle'>Circle</a></li>
            <li><a href="#" class="draw-tool" data-draw='marker'>Marker</a></li>
        </ul>
</div>

Javascript 函数：

$(function() {
    $('.draw-tool').click(function(e) {
        var type = $(this).attr('data-draw');
        if (type === 'marker') {
            e.stopPropagation();
        }
        draw(type);
    })
}); 

function draw(type) {

    var po = '';
    switch(type) {
        case 'polygon':
            po = new L.Draw.Polygon(map);
            break;
        case 'polyline':
            po = new L.Draw.Polyline(map);
            break;
        case 'rectangle':
            po = new L.Draw.Rectangle(map);
            break;
        case 'circle':
            po = new L.Draw.Circle(map);
            break;
        case 'marker':
            po = new L.Draw.Marker(map);
            break;
    }
    po.enable();
}

Leaflet-Draw 标记不能与自定义控件一起正常工作

Leaflet-Draw marker doesn't work properly with custom control

javascript

leaflet

leaflet.draw