Question

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

使用“draggable” -option很容易为“标准”标记执行此操作。但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

找到它，尝试这样的事情。

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

    mymarker.on({
          mousedown: function () {
          map.dragging.disable();
            map.on('mousemove', function (e) {
              mymarker.setLatLng(e.latlng);
            });
          }
       }); 
       map.on('mouseup',function(e){
        map.dragging.enable();
         map.removeEventListener('mousemove');
       })

以下是我的提示： http://jsfiddle.net/akshay_agrawal/76wwqrvh/和http://codepen.io/kad3nce/pen/bEdwOE

Answer 2

在https://github.com/w8r/Leaflet.Path.Drag/找到另一个答案我刚刚添加了Leaflet.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);

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

2 个答案: