在绘制之后，无法从谷歌地图中删除测地线

Question

我尝试在绘制10之后删除行，并在每次重复each循环期间将每个标记和行推入数组，然后调用for循环以循环遍历数组并使用{除了标记和线条之外，每个标记和线条都在{1}}。如何删除它们？我尝试在setMap(null)循环中嵌套each，然后用for替换所有place.whatever，然后用dataArray.places.whatever代替for循环，但仍然没有工作。

var j

Answer 1

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

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

要在添加它们后删除它们，请使用setTimeout删除多边形，使其延迟大于添加折线的最大延迟（dataArray.places.length * 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>