传单动画标记创建重复标记

我正在使用传单和动画标记插件。主要想法是创建一个动画标记，将它放到另一个地方，最后在同一经度和纬度创建另一个（ONE）动画标记，并将其移至另一个地方并删除第一个。传单动画标记创建重复标记

现在，当第一个动画结束时，它会创建两个动画标记。

这里是一个代码的一部分：

function moveDriverToPassengerLocation(driver, passenger) { 

    // Creating the request for google's direction services 
    var request = { 
     origin: driver.startLocation, 
     destination: passenger.startLocation, 
     travelMode: 'DRIVING' 
    }; 

    // Sending the request 
    directionsService.route(request, function (result, status) { 

     // Verify if the status is ok for getting the path 
     if (status == 'OK') { 
      // Decoding the polyline 
      var decodedPath = L.PolylineUtil.decode(
       result.routes[0].overview_polyline); 

      // Verify if the path has more than one point 
      if (decodedPath.length > 1) { 
       var line = L.polyline(decodedPath); 

       // Creating the new animated marker 
       var marker = L.animatedMarker(line.getLatLngs(), 
       { 
        distance: 300, 
        interval: 2000, 
        icon: taxiIcon, 
        onEnd: function() { 
         map.removeLayer(this); 
         moveDriverToPassengerDestination(driver, passenger) 
        } 
       }).addTo(map); 
       marker.id = driver.id; 
       marker.startLocation = driver.startLocation; 
       driversMarkers.push(marker); 
       marker.start(); 
      } 
     } 
    }); 
} 

function moveDriverToPassengerDestination(driver, passenger) { 
    // Creating the request for google's direction services 
    var request = { 
     origin: passenger.startLocation, 
     destination: passenger.destination, 
     travelMode: 'DRIVING' 
    }; 

    // Sending the request 
    directionsService.route(request, function (result, status) { 

     // Verify if the status is ok for getting the path 
     if (status == 'OK') { 
      // Decoding the polyline 
      var decodedPath = L.PolylineUtil.decode(result.routes[0] 
       .overview_polyline); 

      // Verify if the path has more than one point 
      if (decodedPath.length > 1) { 
       var line = L.polyline(decodedPath); 

       // Creating the new animated marker 
       var marker = L.animatedMarker(line.getLatLngs(), 
       { 
        distance: 300, 
        interval: 2000, 
        icon: taxiIcon, 
        onEnd: function() { 
         map.removeLayer(this); 
        } 
       }).addTo(map); 
       marker.id = driver.id; 
       marker.startLocation = driver.startLocation; 
       driversMarkers.push(marker); 
       marker.start(); 
      } 
     } 
    }); 

}

编辑：

一点点调试我发现，onEnd功能是在第一部动画标记在第二行驶两次，以后可能标记，但我仍然不知道为什么会发生这种情况。

来源

2017-10-10 Nadia Bastidas

我只是删除

marker.start();

当我创建一个标记

autoStart: true

所以加入这一行，标记的创作终于看起来像这样：

var marker = L.animatedMarker(line.getLatLngs(), 
{ 
    distance: 300, 
    interval: 2000, 
    autoStart: true, 
    icon: taxiIcon, 
    onEnd: function() { 
     map.removeLayer(this); 
     driver.isMoving = false; 
     addDriverMarker(driver); 
    } 
}).addTo(map);

它解决了这个问题。

来源

2017-10-10 19:45:41

传单动画标记创建重复标记

回答

相关问题