將單張標記拖出地圖

我在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

將單張標記拖出地圖

回答

相關問題