宣传单 – 如何自动删除以前的标记

下面的javascript代码将启用在地图上的地图上创build标记点击本地和全球实时与node.js / socket.io。 这工作正常，但每个添加标记是可见的。

像这个例子： http : //jsfiddle.net/brettdewoody/LK35U/

现在，当第二个标记被添加到地图中时，我需要自动删除上一个标记（第一个标记），然后添加第三个标记 – >删除第二个标记，等等。 任何人都可以帮我理解如何做到这一点？ 也许跟组织者？ 它是如何工作的？

// generate unique user id var userId = Math.random().toString(16).substring(2,15); var socket = io.connect('http://localhost:4000'); var doc = $(document); // custom marker's icon styles var tinyIcon = L.Icon.extend({ options: { iconSize: [25, 39], iconAnchor: [12, 36], shadowSize: [41, 41], shadowAnchor: [12, 38], popupAnchor: [0, -30] } }); var anyIcon = new tinyIcon({ iconUrl: "assets/img/icon.png" }); var sentData = {} var connects = {}; var markers = {}; var active = false; // for node.js send coords and set marker (global) socket.on("load:coords", function(data) { setMarker(data); connects[data.id] = data; connects[data.id].updated = $.now(); // shorthand for (new Date).getTime() console.log(data); }); // set marker (local) function addMarker(position) { var lat = position.latlng.lat; var lng = position.latlng.lng; // mark user's position var userMarker = L.marker([lat, lng], { icon: myIcon, }); userMarker.addTo(map); userMarker.bindPopup("<p>Your ID is " + userId + "</p>").openPopup(); // send coords on when user is active doc.on("click", function() { active = true; sentData = { id: userId, active: active, coords: [{ lat: lat, lng: lng, }] } socket.emit("send:coords", sentData); }); } doc.bind("mouseup mouseleave", function() { active = false; }); // showing markers for connections function setMarker(data) { for (i = 0; i < data.coords.length; i++) { var marker = L.marker([data.coords[i].lat, data.coords[i].lng], { icon: yellowIcon}).addTo(map); marker.bindPopup("<p>Your ID is " + data.id + "</p>").openPopup(); markers[data.id] = marker; } } map.on('click', addMarker); 

编辑：

感谢您的快速回答@ iH8！ 你的解决scheme适合我当地的工作。 但现在当其他用户join（通过node.js）并添加标记到地图时，唯一userId的标记（lat / lng）将被保存在一个数组中。

 // for node.js send coords and set marker (global) socket.on("load:coords", function(data) { setMarker(data); connects[data.id] = data; connects[data.id].updated = $.now(); // shorthand for (new Date).getTime() console.log(data); }); 

这将发送userId的data.coords（lat / lng）并添加到地图中：

 // showing markers for connections function setMarker(data) { for (i = 0; i < data.coords.length; i++) { var marker = L.marker([data.coords[i].lat, data.coords[i].lng], { icon: yellowIcon}).addTo(map); marker.bindPopup("<p>Your ID is " + data.id + "</p>").openPopup(); markers[data.id] = marker; console.log('ID: ' + data.id + ' LAT: ' + data.coords[i].lat + ' LNG: ' + data.coords[i].lng); } } 

第一个添加到地图点击仍然可以

的console.log：

 ID: 74274f99 LAT: 46.34692761055676 LNG: 8.8330078125 

现在第二次点击同一个用户/ UNIQUE userId console.log：

 ID: 74274f99 LAT: 46.34692761055676 LNG: 8.8330078125 ID: 74274f99 LAT: 44.5278427984555 LNG: 9.404296875 

在这里console.log显示我有两个不同的LAT / LNG相同的userId，因为第二次点击。 效果是，现在我在地图上看到两个不同的LAT / LNG标记。 但我只想看到最新的一个：

 ID: 74274f99 LAT: 44.5278427984555 LNG: 9.404296875 

我怎样才能删除第一个/旧的？ 我很困惑。

Answer 1

您可以使用L.Map的removeLayer函数从地图中删除图层。 标记也被看作Leaflet中的图层。 因此，在您的onclick处理程序中，首先删除当前标记，然后创build一个新标记并添加到地图。 像这样的事情会做的伎俩：

 var marker = null; map.on('click', function (e) { if (marker !== null) { map.removeLayer(marker); } marker = L.marker(e.latlng).addTo(map); }); 

在Plunker上的工作示例： http ://plnkr.co/edit/NRl0VQi3wSGK3p8aHlHs?p=preview

编辑：重读你的问题之后，我对你正在努力完成的事情有了更好的理解。 我认为这是你正在寻找的：

 var myId = 'abc'; // My user id // other user id's and their markers var markers = { 'def': L.marker([51.441767, 5.470247]).addTo(map), 'ghi': L.marker([51.441767, 5.480247]).addTo(map), 'jkl': L.marker([51.441767, 5.490247]).addTo(map) }; map.on('click', function (e) { // check if my user id in marker object and thus on the map if (markers.hasOwnProperty(myId)) { // remove the marker map.removeLayer(markers[myId]); } // place (or overwrite) marker with my uid in object and add to map markers[myId] = L.marker(e.latlng).addTo(map); }); 

这是另一个有关Plunker的工作示例： http ://plnkr.co/edit/X8NQVF1FDbNKTV5a5nwn?p=preview