Javascript 在谷歌地图中按坐标预览多段线图形每个坐标

我在google Map中创建了一个应用程序，该应用程序可以完美地绘制多段线，但问题是我需要绘制并显示多段线的预览，在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);
    }
  };

setInterval

不是正确的方法，必须使用

setTimeout

，否则函数将无休止地运行（直到浏览器崩溃）

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

不要在每次函数调用时创建一条新的多段线，在末尾会有很多多段线（每个项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);
}
};

---

显示多段线预览是什么意思？是否要在多段线内显示标记？在每个坐标中？喜欢这张照片吗@EkoJunaidiSalam现在标记很好…只面临多段线绘图的问题…请参阅我的更新HI…我注意到您的答案中有一个问题………在预览期间，在浏览器中打开另一个选项卡并花一些时间，…过了一段时间，如果你检查生成的多边形线的预览，你会看到一些与主多边形线一起绘制的意外多边形线…….我正在使用chrome我已经发布了一个单独的标签，因此当你切换到另一个标签时，可能是chrome中的超时管理不当（浏览器通常试图在非活动窗口中节省内存，例如延迟超时）。我现在必须去工作，稍后再看。