Leaflet v1.03：使 CircleMarker 可拖动？

Question

一些 Leaflet 大师有什么想法，在Leaflet v1.0.3 中使 CircleMarker可拖动的最简单方法是什么？

通过使用“可拖动”选项，可以轻松地为“标准”标记做到这一点。但是 CircleMarker 不存在这样的选项。我通过使用多个事件进行了尝试，但问题是，不是移动标记而是底层地图。

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

<!DOCTYPE html>
<html>
	<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Draggable Markers</title>
		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
		<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
        <style>
            body {padding: 0; margin: 0;}
            html, body, #map {height: 100%;}
      </style>
	</head>
	
	<body>
		<div id="map"></div>
		<script>
            var layerOsm = new L.TileLayer('https://{s}.api.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoicHBldGUiLCJhIjoiY2lsdmE2ZmQ2MDA4OHZxbTZpcmx1emtqbSJ9.Two7SPSaIZysqgOTrrLkRg', {
	          subdomains: 'ab', maxZoom: 20, noWrap:true, attribution:'<a href="http://www.mapbox.com">Mapbox</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' });
			var map = new L.Map('map').addLayer(layerOsm).setView(new L.LatLng(47.8, 13.0), 14);
            L.marker([47.8, 13.0], {draggable:true}).addTo(map);
            
            var circle = L.circleMarker([47.81, 13.01], {radius:30}).addTo(map);

            circle.on('mousedown', function () {
                map.on('mousemove', function (e) {
                    circle.setLatLng(e.latlng);
                });
            }); 
            map.on('mouseup', function(){
                map.removeEventListener('mousemove');
            })
		</script>
	</body>
</html>

Answer 1

Leaflet v1.0+解决方案：

var marker = L.circleMarker([41.91847, -74.62634]).addTo(map)

// extract trackCursor as a function so this specific
// "mousemove" listener can be removed on "mouseup" versus
// all listeners if we were to use map.off("mousemove")
function trackCursor(evt) {
  marker.setLatLng(evt.latlng)
}
    
marker.on("mousedown", function() {
  map.dragging.disable()
  map.on("mousemove", trackCursor)
})

map.on("mouseup", function() {
  map.dragging.enable()
  map.off("mousemove", trackCursor)
})

为了使这种行为更可重用，我们可以将其封装在一个函数中（JS ES6 语法）：

function moveableMarker(map, marker) {
  function trackCursor(evt) {
    marker.setLatLng(evt.latlng)
  }

  marker.on("mousedown", () => {
    map.dragging.disable()
    map.on("mousemove", trackCursor)
  })

  marker.on("mouseup", () => {
    map.dragging.enable()
    map.off("mousemove", trackCursor)
  })

  return marker
}

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

const moveable = moveableMarker(map, marker)

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

• Akshay Agrawal 的 JS Fiddle 示例
• Jedidiah Hurt's Leaflet 1.0 可拖动圆圈