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

setInterval不是正确的方法，您必须使用setTimeout，否则函数将无限运行（直到浏览器崩溃）
你必须增加setTimeout的延迟，否则你不会看到动画（所有的功能都会延迟执行，但同时...... 1秒后执行）

不要在每个函数调用上创建新的Polyline，最后你会有很多折线（每个项目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

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

1 个答案: