如何解决传单实时弹出数据
我在基于传单的网站上有一个用于标记的json数据链接。当我单击地图上的标记时,我希望它显示从json文件中提取的实时数据。我希望每秒钟刷新一次。如果您能指导我,我将很高兴。我尝试了其他方法,但他们将我定向到具有实时数据的网站。
//add more latitude and longitude
let arrs = [
[39.921567,32.798871],[39.9172415,32.803959]
];
var antPath = L.polyline.antPath;
var path = antPath(arrs,{
"paused": false,
"reverse": false,
"delay": 500,
"dashArray": [43,30],
"weight": 5,
"opacity": 0.5,
"color": "#0000FF",
"pulseColor": "#FFFFFF"
});
path.addTo(map).bindPopup("SPEED:6<br>BİTRATE:150<br>NSS:5");
let arrs1 = [
[39.912916,32.809047],32.803959]
];
var antPath = L.polyline.antPath;
var path = antPath(arrs1,{
"paused": true,
"color": "#FF0005",
"pulseColor": "#31203E"
});
path.addTo(map).bindPopup("SPEED:8<br>BİTRATE:125<br>NSS:8");
let arrs2 = [
[39.921567,[39.92105,32.8007925]
];
var antPath = L.polyline.antPath;
var path = antPath(arrs2,
"pulseColor": "#FFFFFF"
});
path.addTo(map).bindPopup("SPEED:2<br>BİTRATE:25<br>NSS:6");
let arrs3 = [
[39.920533,32.802714],32.8007925]
];
var antPath = L.polyline.antPath;
var path = antPath(arrs3,
"pulseColor": "#31203E"
});
path.addTo(map).bindPopup("SPEED:5<br>BİTRATE:250<br>NSS:4");
let arrs4 = [
[39.920533,[39.918802,32.802637]
];
var antPath = L.polyline.antPath;
var path = antPath(arrs4,
"pulseColor": "#FFFFFF"
});
path.addTo(map).bindPopup("SPEED:6<br>BİTRATE:125<br>NSS:7");
let arrs5 = [
[39.917071,32.802560],32.802637]
];
var antPath = L.polyline.antPath;
var path = antPath(arrs5,
"pulseColor": "#31203E"
});
path.addTo(map).bindPopup("SPEED:10<br>BİTRATE:100<br>NSS:7");
var greenIcon = L.icon({
iconUrl: 'tobb.png',iconSize: [50,50],// size of the icon
popupAnchor: [-3,-76] // point from which the popup should open relative to the iconAnchor
});
L.marker([39.921567,{icon: greenIcon}).addTo(map).bindPopup("A");
L.marker([39.912916,{icon: greenIcon}).addTo(map).bindPopup("B");
L.marker([39.917071,{icon: greenIcon}).addTo(map).bindPopup("C");
L.marker([39.920533,{icon: greenIcon}).addTo(map).bindPopup("D");
</script>
}
解决方法
收听popupopen
事件,然后可以使用setContent()
更新内容。当新的弹出窗口打开或旧的弹出窗口关闭时,时间间隔将被清除==停止。
现在,您必须通过默认请求获取数据,然后更新内容。
var i = 0;
var timeout = null;
map.on('popupopen',(e)=>{
var layer = e.target;
var popup = e.popup;
clearInterval(timeout);
timeout = setInterval(()=>{
popup.setContent('TEST '+i);
i++;
},1000)
});
map.on('popupclose',(e)=>{
clearInterval(timeout);
});
更新
我将setInterval
更改为setTimeout
,现在它正在等待请求完成。
var i = 0;
var timeout = null;
map.on('popupopen',(e)=>{
console.log(e);
var layer = e.target;
var popup = e.popup;
clearTimeout(timeout);
startTimeout(popup);
});
map.on('popupclose',(e)=>{
clearTimeout(timeout);
});
function startTimeout(popup){
timeout = setTimeout(()=>{
fetch('http://medikalarge.com/ayy/mesh_path.json')
.then(response => response.json())
.then(result => {
console.log(result)
var data = result.data;
console.log(data);
popup.setContent(data[0].from_loc + " "+data[0].bitrate);
startTimeout(popup);
});
},1000);
}
https://jsfiddle.net/falkedesign/pcnqL1dm/
我希望您不要忘记接受或支持答案,如果它对您有用的话
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。