Leaflet v1.03：使CircleMarker可拖動？

做一些小葉大師有一個想法，什麼是最簡單的方法來做一個CircleMarker可拖動單張v1.0.3？Leaflet v1.03：使CircleMarker可拖動？

通過使用「可拖動」選項，可以很容易地爲「標準」標記執行此操作。但CircleMarker不存在這樣的選項。我通過使用幾個事件來嘗試它，但問題是，標記不是正在移動，而是底層地圖。

另一種可能性可能是使用「stopPropagation」功能（但僅適用於DOMEvents）。或者使用「removeEventParent」 ......如果CircleMarker的「父母」是地圖及其事件？關於文檔還有DOMUtility/Draggable -class。這是我需要的嗎？

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
     <meta charset="UTF-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
     <title>Draggable Markers</title> 
 
\t \t <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> 
 
\t \t <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> 
 
     <style> 
 
      body {padding: 0; margin: 0;} 
 
      html, body, #map {height: 100%;} 
 
     </style> 
 
\t </head> 
 
\t 
 
\t <body> 
 
\t \t <div id="map"></div> 
 
\t \t <script> 
 
      var layerOsm = new L.TileLayer('https://{s}.api.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoicHBldGUiLCJhIjoiY2lsdmE2ZmQ2MDA4OHZxbTZpcmx1emtqbSJ9.Two7SPSaIZysqgOTrrLkRg', { 
 
\t   subdomains: 'ab', maxZoom: 20, noWrap:true, attribution:'<a href="http://www.mapbox.com">Mapbox</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' }); 
 
\t \t \t 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'); 
 
      }) 
 
\t \t </script> 
 
\t </body> 
 
</html>

來源

2017-04-14 SammyC

我GOOGLE了這一點，因爲我也試圖讓circleMarker拖動。我認爲這對星期五下午來說是件容易的事，但並非如此。 –

不與'L.circleMarker'，但你可以用['L.divIcon（）']（http://leafletjs.com/reference-1.0.3.html#divicon）替代，並使它看起來像一個圓圈與CSS ，並且*可以被拖動。見https://gis.stackexchange.com/a/226814/ – user2441511

發現它，嘗試這樣的事情。

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

來源

2017-04-14 19:04:49

感謝比爾，你的代碼從codepen.io正在工作，另一個從jsfiddle只是與小葉0.7，而不是與v1.0.3（地圖被移動，而不是圈）。與幾個事件混雜在一起，並關閉/在map.dragging只是爲了移動一個circleMarker。 – SammyC

找到在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);

來源

2017-04-21 18:05:22

Leaflet v1.03：使CircleMarker可拖動？

回答

相關問題