Leaflet-Draw 标记不适用于自定义控件答案

【问题标题】：Leaflet-Draw marker doesn't work properly with custom controlLeaflet-Draw 标记不适用于自定义控件
【发布时间】：2017-06-22 16:48:37
【问题描述】：

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

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

我该如何解决这个问题？

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

感谢和抱歉我的英语不好！

【问题讨论】：

标签： javascript leaflet leaflet.draw

【解决方案1】：

尝试关注标记

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

【讨论】：

【解决方案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();
}

【讨论】：