Leafletjs: Как получить новый маркер в первый клик, затем обновить latlng маркера во втором клике

Question

У меня есть список маркеров, которые нужно отобразить на карте, но я хочу его по одному. В первый клик я хочу сделать новый маркер. Затем, когда я нажимаю на другое место, я хочу, чтобы мой маркер просто перешел к новому latLng, чтобы не создавать другой маркер. Вот мой код:

function (licon, coord, data) { 
    var self = jQuery(this); 
    var map = self.data("map"); 
    var latlng = new L.LatLng(coord[0], coord[1]); 
    //Create Marker 

    if (licon) { 
     var leafIcon = L.icon(licon); 
     console.log(typeof (marker)); 
     if (typeof (marker) === 'undefined') { 
      var marker = L.marker(latlng, { 
       icon: leafIcon, 
        "markerData": data, 
       draggable: true 
      }); 

     } else { 
      console.log('not undefined'); 
      map.removeLayer(marker); 
      marker = L.marker(latlng, { 
       icon: leafIcon, 
        "markerData": data, 
       draggable: true 
      }); 
     } 
    } else { 
     var marker = L.marker(latlng, { 
      "markerData": data, 
      draggable: true 
     }); 

    } 

    marker.addTo(map); 
    return marker; 
} 

Answer 1

Быстрый пример результата: http://jsfiddle.net/ve2huzxw/43/

var currentMarker; 

map.on("click", function (event) { 
    if (currentMarker) { 
     currentMarker.setLatLng(event.latlng); 
     return; 
    } 

    currentMarker = L.marker(event.latlng, { 
     draggable: true 
    }).addTo(map).on("click", function() { 
     event.originalEvent.stopPropagation(); 
    }); 
}); 

document.getElementById("done").addEventListener("click", function() { 
    currentMarker = null; 
}); 

Вы также можете добавить плавный переход, чтобы показать маркер перехода на новую позицию:

if (currentMarker) { 
    currentMarker._icon.style.transition = "transform 0.3s ease-out"; 
    currentMarker._shadow.style.transition = "transform 0.3s ease-out"; 

    currentMarker.setLatLng(event.latlng); 

    setTimeout(function() { 
     currentMarker._icon.style.transition = null; 
     currentMarker._shadow.style.transition = null; 
    }, 300); 
    return; 
}