绘制完测地线后不能从谷歌地图上删除

删除行的循环在设置添加行的setTimeout调用的循环之后立即运行。这些setTimeout调用延迟然后运行包含的函数。所以时间轴是:

1. 循环设置在各种延迟下创建折线
2. 循环删除折线运行
3. setTimeout函数运行，将折线添加到地图中。

在添加后删除它们，使用setTimeout删除延迟大于添加折线(dataArray.places)的最大延迟的折线。长度* 2500应可)。

删除在之后添加的折线的代码片段:

var dataArray = {
  'places': [{
    'destinationLng': '-74',
    'sourceLng': '-91',
    'destinationLat': '40',
    'sourceLat': '38'
  }, {
    'destinationLng': '-104',
    'sourceLng': '-99',
    'destinationLat': '39',
    'sourceLat': '19'
  }, {
    'destinationLng': '18',
    'sourceLng': '-112',
    'destinationLat': '59',
    'sourceLat': '49'
  }, {
    'destinationLng': '-122',
    'sourceLng': '-91',
    'destinationLat': '37',
    'sourceLat': '38'
  }, {
    'destinationLng': '-74',
    'sourceLng': '-80',
    'destinationLat': '40',
    'sourceLat': '41'
  }, {
    'destinationLng': '-121',
    'sourceLng': '123',
    'destinationLat': '37',
    'sourceLat': '10'
  }]
};
function initialize() {
  mapOptions = {
    zoom: 2,
    center: new google.maps.LatLng(40.6700, -73.9400),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  el = document.getElementById('map');
  map = new google.maps.Map(el, mapOptions);
  console.log(dataArray.places.length);
  var markers = [];
  var geoLines = [];
  dataArray.places.forEach(/* dataArray.places, */ function(place, index) {
    window.setTimeout(function() {
      start = new google.maps.LatLng(place.sourceLat, place.sourceLng);
      endpt = new google.maps.LatLng(place.destinationLat, place.destinationLng);
      document.getElementById('status').innerHTML += "line " + index + " start=" + start.toUrlValue(6) + " end=" + endpt.toUrlValue(6) + "<br>";
      coords = [start, endpt];
      var color = '#393';
      var lineSymbol = {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 8,
        strokeColor: color
      };
      source = new google.maps.Marker({
        position: start,
        map: map,
        icon: {
          path: google.maps.SymbolPath.CIRCLE,
          scale: 8,
          strokeColor: color
        },
      });
      markers.push(source);
      geoLine = new google.maps.Polyline({
        path: coords,
        strokeColor: color,
        strokeOpacity: 2,
        strokeWeight: 2,
        geodesic: true,
        map: map,
        icons: [{
          icon: lineSymbol,
          offset: '100%'
        }]
      });
      geoLines.push(geoLine);
      // animateCircle();
      // animatePoly();
    }, index * 2500);
  });
  setTimeout(function() {
    document.getElementById('status').innerHTML += "remove lines<br>";
    for (var i = 0; i < dataArray.places.length; i++) {
      markers[i].setMap(null);
      geoLines[i].setMap(null);
    }
  }, dataArray.places.length * 2500);
}
function animateCircle() {
  var count = 0;
  window.setInterval(function() {
    count = (count + 1) % 200;
    var icons = line.get('icons');
    icons[0].offset = (count / 2) + '%';
    line.set('icons', icons);
  }, 20);
}
function animatePoly() {
  var step = 0;
  var numSteps = 250;
  var timePerStep = 1;
  var interval = setInterval(function() {
    step += 1;
    if (step > numSteps) {
      clearInterval(interval);
    } else {
      var theMotion = google.maps.geometry.spherical.interpolate(start, endpt, step / numSteps);
      geodesicPoly.setPath([start, theMotion]);
    }
  }, timePerStep);
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places"></script>
<div id="status"></div>
<div id="map" style="border: 2px solid #3872ac;"></div>