Javascript 传单-如何自动删除以前的标记
下面的javascript代码将支持使用node.js/socket.io在map-on-map-click-local和global上实时创建标记。这很好,但每个添加的标记都是可见的 像这个例子: 现在,当第二个标记添加到地图中时,我需要自动删除前一个标记(第一个),然后添加第三个标记->删除第二个标记,依此类推。有人能帮我理解怎么做吗?也许和grouplayer一起?它是如何工作的Javascript 传单-如何自动删除以前的标记,javascript,node.js,leaflet,mapbox,Javascript,Node.js,Leaflet,Mapbox,下面的javascript代码将支持使用node.js/socket.io在map-on-map-click-local和global上实时创建标记。这很好,但每个添加的标记都是可见的 像这个例子: 现在,当第二个标记添加到地图中时,我需要自动删除前一个标记(第一个),然后添加第三个标记->删除第二个标记,依此类推。有人能帮我理解怎么做吗?也许和grouplayer一起?它是如何工作的 // generate unique user id var userId = Math.random().t
// 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);
这将发送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);
}
}
现在,第二次单击相同的用户/唯一用户ID
console.log:
ID: 74274f99 LAT: 46.34692761055676 LNG: 8.8330078125
ID: 74274f99 LAT: 46.34692761055676 LNG: 8.8330078125
ID: 74274f99 LAT: 44.5278427984555 LNG: 9.404296875
由于第二次单击,这里的console.log向我显示了具有两个不同LAT/LNG的相同用户ID。效果是,现在我在地图上看到两个具有不同LAT/LNG的标记。
但我只想看最新的:
ID: 74274f99 LAT: 44.5278427984555 LNG: 9.404296875
如何删除第一个/旧的?
我很困惑。您可以使用L.map的功能从地图中删除图层。标记也被视为传单中的一层。因此,在onclick处理程序中,首先删除当前标记,然后创建一个新标记并添加到映射中。像这样的东西可以达到目的:
var marker = null;
map.on('click', function (e) {
if (marker !== null) {
map.removeLayer(marker);
}
marker = L.marker(e.latlng).addTo(map);
});
Plunker的工作示例:
编辑:在重读了你的问题之后,我对你想要达到的目标有了更好的理解。我想这就是你想要的:
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的另一个工作示例:您应该能够在这里使用第一个答案:我已经编辑了我的答案,再看一眼很好!感谢您在iH8解决了这两个问题
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);
});