在谷歌地图中按坐标预览折线绘制每个坐标

Question

我在 googlemap 中使用折线创建了一个应用程序，该应用程序在完美绘制折线的情况下工作正常，但问题是我需要绘制并显示折线的预览，按坐标绘制每个坐标谷歌地图

我们怎样才能做到这一点？我已经尝试使用 setInterval（在我的代码中注释）但它不能正常工作

谁能告诉我一些解决方法

      $scope.autoRefresh = function() {
    try {
      //
      routePoints = [];
      if (!_.isEmpty(items)) {
        angular.forEach(items, function(cordinates) {
          //setInterval(function ()
          //{           
            routePoints.push(new google.maps.LatLng(cordinates.lat, cordinates.lng));
            var route = new google.maps.Polyline({
              path: routePoints,
              strokeColor: '#FF0000',
              strokeOpacity: 2.0,
              strokeWeight: 3,
              editable: false
            });
            route.setMap(map);
            moveMarker(map, marker, cordinates.lat, cordinates.lng);
            markLAT = cordinates.lat;
            markLNG = cordinates.lng;
          //}, 1000);
        });  
      }
      //  
    } catch (e) {
      console.log(e);
    }
  };

Plunker

Answer 1

1. setInterval不是正确的方法，必须使用setTimeout，否则函数会无限运行（直到浏览器崩溃）

2. 您必须增加 setTimeout 的延迟，否则您将看不到动画（所有函数都会延迟执行，但同时...在 1 秒后）

3. 不要在每个函数调用上都创建一个新的折线，最后会有很多折线（每个项目 1 条）。创建一条折线并将位置推送到折线的路径

   $scope.autoRefresh = function() {
   try {
     var route = new google.maps.Polyline({
             path: [],
             strokeColor: '#FF0000',
             strokeOpacity: 2.0,
             strokeWeight: 3,
             editable: false,
             map:map
           }),
           index=0,
           marker=new google.maps.Marker({map:map,icon:icon});
   
     if (!_.isEmpty(items)) {
       angular.forEach(items, function(cordinates) {
         setTimeout(function ()
         {         
           route.getPath().push(new google.maps.LatLng(cordinates.lat, cordinates.lng));
   
           route.setMap(map);
           moveMarker(map, marker, cordinates.lat, cordinates.lng);
           markLAT = cordinates.lat;
           markLNG = cordinates.lng;
         }, 200*++index);
       });  
     }
     //  
   } catch (e) {
     console.log(e);
   }
   };
   

Plunker