Leaflet v1.03：使 CircleMarker 可拖动？

问题描述 投票：0回答：3

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

通过使用 “draggable” 选项，可以轻松地对“标准”标记执行此操作。但 CircleMarker 不存在这样的选项。我通过使用多个事件进行了尝试，但问题是，不是标记被移动，而是底层地图被移动。

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

<!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/[email protected]/dist/leaflet.css" />
		<script src="https://unpkg.com/[email protected]/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>

leaflet draggable move geometry marker
3个回答
12
投票

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)

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

1
投票

在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);
0
投票

我这样解决这个问题（leflet v1.9.4）

// "map" - leaflet map instance
function addPoint(lat, lng) {
    const circle = L.circleMarker({ lat, lng }, { radius: 8 })

    const mouseMoveHandler = function (e) {
        circle.setLatLng(e.latlng)
    }

    circle.on('mousedown', () => {
        map.dragging.disable()
        map.on('mousemove', mouseMoveHandler)
    })
    map.on('mouseup', () => {
        map.off('mousemove', mouseMoveHandler)
        map.dragging.enable()
    })
    map.on('mouseout', () => {
        map.off('mousemove', mouseMoveHandler)
        map.dragging.enable()
    })

    circle.addTo(map)
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.