在 google 地图中按坐标绘制折线的预览

Question

我已经在 googlemap 中创建了一个带有多段线的应用程序，该应用程序可以很好地绘制完美的多段线，但问题是我需要绘制并显示多段线的预览, 在google-maps

中按坐标绘制每个坐标

我们怎样才能做到这一点？我已尝试使用 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