2017-10-10 139 views
0

我正在使用傳單和動畫標記插件。主要想法是創建一個動畫標記,將它放到另一個地方,最後在同一經度和緯度創建另一個(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功能是在第一部動畫標記在第二行駛兩次,以後可能標記,但我仍然不知道爲什麼會發生這種情況。

回答

0

我只是刪除

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); 

它解決了這個問題。