如何每5秒更新一次传单标记 [英] How to update leaflet markers for every 5 seconds
问题描述
我正在制作传单地图和标记.
I am working on a Leaflet map and markers.
我正在从JSON获取标记latlng并正确显示它.
I am getting markers latlng from JSON and showing it correctly.
getLatLng()
function getLatLng() {
var details = '/equipment/api/getLatLong';
$.ajax({
url: details,
method: 'get'
}).done(function(response) {
$('.subSection').html('').append('<section><button type="button" onclick="hideEquipmentDetails()"><i class="fa fa-times"></i></button></section>');
var equipmentDetails = response.data.filters;
console.log(equipmentDetails)
$.each(equipmentDetails, function(i, value) {
L.marker([value.latitude, value.longitude]).addTo(map).bindPopup('<b><span> Name:</span>' + value.name + '</b>');
})
});
}
setInterval(function() {
getLatLng();
}, 5000)
我每5秒钟刷新一次方法.
I am refreshing the method for every 5 seconds.
所以我需要在更新的latlng中显示标记,并且应该隐藏旧标记.
So I need to show the markers in updated latlng and old markers should be hidden.
setInterval(function() {
//L.marker.setOpacity(0);
//L.markerClusterGroup()
//markers.clearLayers();
//map.removeLayer(L.marker);
//markers.removeLayer()
//L.marker().removeTo(map);
getLatLng();
}, 5000)
我尝试了所有方法来实现这一目标,但我做不到.
I tried every options to achieve this but I couldn't.
还有其他方法吗?
否则,我应该再定义一个数组来存储初始latlng值,然后每次检查latlng是否被更改(在这种情况下,我只能正确替换已更新的latlng标记吗?不需要每次都替换所有标记吗? )
Otherwise should I define one more array to store the initial latlng values then to check each time whether latlng is changed or not (in this scenario I can replace only updated latlng markers right?No need to replace all markers every time right?)
推荐答案
Instead of instantiating a new marker on every update, you could simply modify its position using its setLatLng()
method.
通常的实现是使用全局"标记变量(仅在更新函数之外的范围内就足够了),在第一次迭代时将其初始化为Marker,然后无需实例化新变量,只需修改其位置即可
The usual implementation is to use a "global" marker variable (just in a scope outside your update function is enough), initialize it to a Marker on your first iteration, then instead of instantiating a new one, simply modify its position.
可能比较棘手的部分是同时管理多个标记.您需要某种识别方式才能知道要更新哪个.我认为这是您的value.name
:
The possibly slightly trickier part is to manage several markers at the same time. You need some sort of identification mean to know which one to update. I assume it is your value.name
:
var markers = {}; // Dictionary to hold your markers in an outer scope.
function ajaxCallback(response) {
var equipmentDetails = response.data.filters;
$.each(equipmentDetails, function(i, value) {
var id = value.name;
var latLng = [value.latitude, value.longitude];
var popup = '<b><span> Name:</span>' + id + '</b>';
if (!markers[id]) {
// If there is no marker with this id yet, instantiate a new one.
markers[id] = L.marker(latLng).addTo(map).bindPopup(popup);
} else {
// If there is already a marker with this id, simply modify its position.
markers[id].setLatLng(latLng).setPopupContent(popup);
}
});
}
$.ajax({
url: details,
method: 'get'
}).done(ajaxCallback);
这篇关于如何每5秒更新一次传单标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!