将单张标记拖出地图

我在ASP.NET MVC 5应用程序中使用了单张标记。将单张标记拖出地图

我需要将应用程序外部的标记拖到一个div元素，我希望获得它的id来执行进一步的操作。

marker=new L.marker([latNumber,longNumber], {draggable:'true'}); 
    marker.id = "ABC"; 
    $('#'+ marker.id).draggable(); // draggable jquery UI 
    marker.on('dragend', function(event){ 


    var marker = event.target; 
    var position = marker.getLatLng(); 
    console.log(position); 
    marker.setLatLng(position,{draggable:'true'}).bindPopup(position).update(); 
});

在另一方面，我使用jQuery UI

$("#navs").droppable({ 
     drop: function (event, ui) { 
      alert('dropped') 
     } 
    });

我没有得到资产净值元素，当我把它在它下降的事件投掷的元素。我需要做些什么才能使其发挥作用。

如果有人可以进一步解释this，这也会有很大的帮助。

来源

2016-11-20 Michael

您不能在地图之外拖动Leaflet标记。

标记的可拖动选项和jQuery的可拖动概念完全不同。

那就是说，你可以假装一个标记是通过使用标记的图像拖动它在地图上方的一个位置：它不是地图的一部分，但它看起来像（这就是你提到的链接是什么参照）

<div> 
<div id='map'></div> 
<img style="position: absolute; left: 300px; top: 200px; z-index: 1000" id="fakeMarker" src="https://unpkg.com/[email protected]/dist/images/marker-icon.png"></img> 
</div> 

<ul id="liste"> 
    <li>A</li> 
    <li>B</li> 
    <li>C</li> 
    <li>D</li> 
</ul> 

<div id="log"></div> 

<script> 
$(function() { 
    $("#fakeMarker").draggable(); 

    $("#liste li").droppable({ 
    accept: "#fakeMarker", 
    drop: function(event, ui) { 
     $("#log").html("dropped on " + $(this).html()); 
    } 
    }); 
}); 
</script>

下面是一个例子：https://yafred.github.io/leaflet-tests/20161120-drag-and-drop-outside-map/

来源

2016-11-20 15:42:33 YaFred

我收集了不同GPS位置附加的标记，而不是单个标记。 – Michael

事实上，似乎有一种变通方法。标记添加到地图后，小叶标记调用事件“添加”，并且变得可见。在这种情况下，您可以初始化与该标记对应的图标上的可拖动。

m=L.marker([lat,lng],{ 
    title:title, 
    draggable:true 
    }); 
m.on("add",function(){ 
    $(this._icon).data("marker",this); 
    $(this._icon).draggable({ 
     appendTo:"body", 
     helper:"clone", 
     zIndex:1000 
    }); 
});

“appendTo”是在单张面板之外拖动所必需的。 zIndex应该比单张地图zIndex更高（不确定它是否已修复，在我的页面上是600）。可能需要一个辅助功能来复制图标，我已经定制了我的帮手（标记可通过数据“标记”访问）。

我已经用小册子1.0.3。

来源

2017-06-23 09:35:16 Voider

将单张标记拖出地图

回答

相关问题