传单实时弹出数据

问题描述

我在基于传单的网站上有一个用于标记的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/

我希望您不要忘记接受或支持答案，如果它对您有用的话