Question

我正在尝试在传单地图上显示一些数据。显示标记就像是一种魅力，但是现在存在下一个挑战。我需要每隔几秒钟更新一次标记位置，而无需重新加载整个页面。现在，我正在获得这样的标记值。

<html>
  <body>
  [...]
    <script type='text/javascript' src='maps/markers.js'></script>
    <script type='text/javascript' src='maps/leaflet.js'></script>
  </body>
</html>

markers.js的内容：

var markers = [
        {
            "lastStateChange": "2020-07-19T19:51:52Z", 
            "lastLocationUpdate": "2020-07-20T08:12:18Z", 
            "lat": foo, 
            "lng": bar, 
            "batteryLevel": 41, 
            "id": "4628a429a"
        }, 
        {
            "lastStateChange": "2020-07-20T00:12:36Z",  
            "lastLocationUpdate": "2020-07-20T08:17:12Z",  
            "lat": fooo, 
            "lng": bar, 
            "batteryLevel": 100, 
            "id": "8d1374c35"
        }
];

当数据集发生变化时，markers.js每隔几秒钟更新一次。有什么建议可以在不重新加载整个页面的情况下每几秒钟更新一次变量“ markers”的内容吗？

Answer 1

签出leaflet-realtime library。还有a demo，其中标记的位置每隔几秒钟更新一次

Answer 2

Ciao，您为什么不像这样使用setInterval()？

setInterval(function(){ /*update markers*/ }, 3000);

Answer 3

因此，您要做的是创建一个Web worker，让我们将其命名为同步器，该同步器将在设定的时间间隔内被调用（例如，标记数组值每30秒更改一次）。

synchronizer = new Worker('markers.js');

Web Worker是一种JavaScript，它在后台运行，独立于其他脚本，而不会影响页面的性能。

w = new Worker("markers.js");
w.onmessage = function(event){
  //Now we will have the response of the markers.js
};

您可以了解有关网络工作者的更多信息 [https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers] [1]

有没有一种方法可以在不重新加载页面的情况下重新加载JS中的变量？

3 个答案: