Leafletjs：如何在第一次单击时获得新标记，然后在第二次单击时更新标记的 latlng答案

【问题标题】：Leafletjs: How to have new marker in first click then update the latlng of marker in second clickLeafletjs：如何在第一次单击时获得新标记，然后在第二次单击时更新标记的 latlng
【发布时间】：2016-02-22 01:57:25
【问题描述】：

我有想要在地图中渲染的标记列表，但我想要一个一个。在第一次单击时，我想制作新的标记。然后，当我单击另一个位置时，我希望我的标记只是移动到新的 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;
}

【问题讨论】：

应该typeof (marker === 'undefined') 而不是typeof marker === 'undefined'？
已经编辑了代码
我猜你在每个用户点击地图时调用你的函数？在这种情况下，您的 var marker 可能应该在该函数的范围之外，以便您可以在下次调用时检索它并检查是否是 undefined。您可能还对marker.setLatLng() 感兴趣，而不是删除标记并添加一个新标记。

标签： leaflet marker angular-leaflet-directive

【解决方案1】：

几年后稍微更统一的解决方案。

var currentMarker;

map2.on('click', function(e) {
    if (currentMarker){
        currentMarker.setLatLng(e.latlng)
    } else {
        currentMarker = new L.marker(e.latlng).addTo(map2);
    };
    
    //console.log('lat, lon: ', e.latlng.lat, e.latlng.lng);
    
  });

leaflet 现在默认平滑地将点拖到新坐标上。

【讨论】：

【解决方案2】：

结果的简单示例：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;
}

【讨论】：