Leaflet 传单v1.03：使CircleMarker可拖动？

一些传单大师有什么想法吗？在传单v1.0.3中，最简单的方法是什么

通过使用“可拖动”选项，很容易为“标准”标记执行此操作。但这样的选择对于CircleMarker来说并不存在。我尝试使用几个事件，但问题是，移动的不是标记，而是底层的贴图

另一种可能是使用“stopPropagation”功能（但仅适用于DOMEvents）。或者使用“removeEventParent”。。。如果CircleMarker的“父对象”是地图及其事件？ 关于文档，还有domputility/Draggable类。这是我需要的吗

可拖动标记
正文{填充：0；边距：0；}
html，body，#map{height:100%；}
var layerOsm=new L.TileLayer（'https://{s}.api.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}.png？access_token=pk.eyj1ijoichbldguilcjhijoiy2lsdme2zmq2mda4ohzbxbtzpcmx1emtqbsj9.two7spsaizysqgotrlkrg'{
子域：“ab”，maxZoom:20，noWrap:true，属性：“|”}）；
var map=新的L.map（'map'）.addLayer（layerOsm）.setView（新的L.LatLng（47.8,13.0），14）；
标记（[47.8,13.0]，{draggable:true}）.addTo（map）；
var circle=L.circleMarker（[47.81,13.01]，{radius:30}）；
circle.on（'mousedown'，函数（）{
map.on（'mousemove'，函数（e）{
圈。设置拉特林（即拉特林）；
});
}); 
on（'mouseup'，function（）{
removeEventListener（'mousemove'）；
})

传单v1.0+解决方案：

var marker=L.circleMarker（[41.91847，-74.62634]）.addTo（map）
//将trackCursor提取为一个函数，以便
//“mousemove”侦听器可以在“mouseup”上删除，而不是
//如果我们要使用map.off（“mousemove”），所有侦听器
函数跟踪光标（evt）{
标记设置（evt设置）
}
marker.on（“mousedown”，function（））{
map.draging.disable（）
map.on（“mousemove”，trackCursor）
})
on（“mouseup”，function（））{
map.draging.enable（）
map.off（“mousemove”，trackCursor）
})

为了使此行为更具可重用性，我们可以将其封装在函数中（JS ES6语法）：

功能可移动标记（地图、标记）{
函数跟踪光标（evt）{
标记设置（evt设置）
}
marker.on（“mousedown”，（）=>{
map.draging.disable（）
map.on（“mousemove”，trackCursor）
})
marker.on（“mouseup”，（）=>{
map.draging.enable（）
map.off（“mousemove”，trackCursor）
})
返回标记
}

然后，您可以使标记可以拖动/移动，如下所示：

const moveable=moveableMarker（映射，标记）

这些示例有助于构建上述解决方案：

在 我刚刚添加了传单.Path.Drag.js。现在我可以从我的REST服务中读取我所有的站点并移动它们

var data = {
    "type": "FeatureCollection",
    "features": [
        {
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -73.7979125, 42.704642
                ]
            },
            "type": "Feature",
            "properties": {
                "popupContent": "This is Point 1. "
            },
            "id": 51
        },
        {
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -73.630371,42.698585
                ]
            },
            "type": "Feature",
            "properties": {
                "popupContent": "This is Point 2. "
            },
            "id": 52
        }
    ]
};

var map = L.map('map', {editable: true}).setView([43, -74], 8);

var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{ 
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> //contributors'}).addTo(map);


function onEachFeature(feature, layer) {
var popupContent = feature.properties.popupContent
layer.bindPopup(popupContent);

    layer.on('dragend', function(e){
        console.log(layer.getLatLng().lat);
        console.log(layer.getLatLng().lng);
    });

}

var mymarker =L.geoJSON(data, {

style: function (feature) {
    return feature.properties && feature.properties.style;
},

onEachFeature: onEachFeature,

pointToLayer: function (feature, latlng) {
    return L.circleMarker(latlng,{ draggable: true }, {
        radius: 8,
        fillColor: "#ff7800",
        color: "#000",
        weight: 1,
        opacity: 1,
        fillOpacity: 0.8
    });
}
}).addTo(map);

var数据={
“类型”：“FeatureCollection”，
“特点”：[
{
“几何学”：{
“类型”：“点”，
“坐标”：[
-73.7979125, 42.704642
]
},
“类型”：“功能”，
“财产”：{
“popupContent”：“这是第1点。”
},
“身份证”：51
},
{
“几何学”：{
“类型”：“点”，
“坐标”：[
-73.630371,42.698585
]
},
“类型”：“功能”，
“财产”：{
“popupContent”：“这是第2点。”
},
“身份证”：52
}
]
};
var map=L.map（'map'，{editable:true}）.setView（[43，-74]，8）；
var osm=newl.tileLayer（'http://{s}.tile.osm.org/{z}/{x}/{y}.png'，{
属性：'©；//contributors'}）.addTo（映射）；
功能onEachFeature（功能，图层）{
var popupContent=feature.properties.popupContent
layer.bindPopup（弹出内容）；
层上（'dragend'，函数（e）{
console.log（layer.getLatLng（）.lat）；
console.log（layer.getLatLng（）.lng）；
});
}
var mymarker=L.geoJSON（数据{
风格：功能（特征）{
返回feature.properties&&feature.properties.style；
},
onEachFeature:onEachFeature，
pointToLayer：功能（特性、latlng）{
返回L.circleMarker（latlng，{draggable:true}{
半径：8，
fillColor:#ff7800“，
颜色：“000”，
体重：1，
不透明度：1，
填充不透明度：0.8
});
}
}).addTo（地图）；

我刚刚在谷歌上搜索了这个，因为我也在尝试让circleMarker可以拖动。我想这对于一个周五的下午来说是件容易的事情，但不是这样。不是用

L.circleMarker

，但是你可以用css替换它，使它看起来像一个圆圈，这是可以拖动的。请参阅可能重复的感谢法案，您在codepen.io中的示例正在运行，另一个来自jsfiddle的示例仅包含传单0.7，而不是v1.0.3（正在移动地图而不是圆）。处理几个事件和关闭/打开地图仍然相当复杂。拖动只是为了移动一个圆圈标记器。谢谢比尔。很好的解决方案。可以将此解决方案调整为Circle或任何其他具有LatLng的对象的子类的特征。我现在用它来移动一个圆圈标记。这很好，但是如果你在悬停另一个标记的时候碰巧碰到鼠标，那么事件就不会触发。在映射上注册该处理程序比在标记上注册更好。例如，

map.on（“mouseup”，…