リーフレットv1.03：CircleMarkerをドラッグ可能にしますか？

いくつかのリーフレットの達人はアイデアを持っていますか？CircleMarker draggable in リーフレットv1.0.3？リーフレットv1.03：CircleMarkerをドラッグ可能にしますか？

「ドラッグ可能な」オプションを使用すると、「標準」マーカーとして使用するのは簡単です。しかしCircleMarkerにはそのようなオプションは存在しません。私はいくつかのイベントを使って試しましたが、問題は、マーカーが移動されているのではなく、基礎となるマップです。

もう1つの可能性は、"stopPropagation" -Function（ただし、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

私は、サークルマーカーをドラッグ可能にしようとしています。私はそれが金曜日の午後は簡単なことだと思った。 –

'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

を参照してください。Thanks Bill、codepen.ioの例が動作しています。もう1つはjsfiddleのリーフレット0.7で、v1.0.3では使用できませんでした。サークル）。まだいくつかのイベントでやりとりをしたり、単にcircleMarkerを移動するためにmap.draggingをオフ/オンに切り替えるのはかなり複雑です。 – SammyC

は、私はちょうどLeaflet.Path.Drag.jsを追加https://github.com/w8r/Leaflet.Path.Drag/ で別の答えを見つけました。これで、私は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

リーフレットv1.03：CircleMarkerをドラッグ可能にしますか？

答えて

関連する問題