谷歌地图标记与Javascript自定义精确计时器使用Performance.now()

时间:2017-03-24 14:16:21

标签: javascript google-maps google-maps-api-3 timer

我已将10个引脚添加到我的地图中:

for(i=0;i<10;i++){
    markers[i] = new google.maps.Marker({
        position: {lat: my_lat[i], lng: my_lat[i]}
    });
}

现在我想以非常精确的间隔在地图上显示这些标记。 使用setInterval和setTimeout会产生0到4毫秒之间的错误。

performance.now()似乎非常精确。我构建的计时器在控制台中打印经过的时间,误差小于1毫秒。 (这太好了!)

然而,问题是标记仅在for循环的末尾绘制,一次全部绘制。有没有办法确保我逐个绘制它们?

这是绘图代码:

for (i=0;i<10;i++){
      var t0 = performance.now();
      var dt = 0;

      while (dt<1000){
          dt = performance.now() - t0;
      }
      markers[i].setMap(map);
      console.log(dt);
}

1 个答案:

答案 0 :(得分:0)

我找到了解决方案。要使用setTimeouts而不是for循环:

        var s = 0;
        setTimeout(function(){
          console.log("start " + performance.now());
          setTimeout(tim, 0);
        }, 1000);

        function tim(){
          var t0 = performance.now();
          var dt = 0;

          while (dt<interval[s]){
            dt = performance.now() - t0;
          }   
          markers[s].setMap(map);
          console.log(dt);
          s++;
          setTimeout(tim, 0);
        }