我如何設置在多段線上移動的符號的速度

Question

我正在爲我的實習創建一個項目，並且我有一些飛機在Google地圖上的多段線上移動。我想以簡單的方式創建我的項目，因爲我幾乎沒有任何經驗，也許我做錯了方式，這就是爲什麼我要求幫助。 You can see what i'm talking about here

我現在有4架飛機，所以我必須爲每一架飛機創建一個功能，因爲如果我不是飛往西班牙的飛機到達巴西的飛機的同一時間，並且它們都起飛同一時間。

這是我的時刻，所以我創建了costum路徑符號，然後將多段線。

function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
     zoom: 3, 
 
     center: {lat: 12.1336018, lng: -15.1832411}, 
 
     mapTypeId: 'terrain' 
 
    }); 
 
    //Define the custom symbols. All symbols are defined via SVG path notation. 
 
    // They have varying stroke color, fill color, stroke weight, 
 
    // opacity and rotation properties. 
 

 
    var planeSymbol = {path: 'M 8.1326447,0.80527736 C 8.5471666,0.063577346 9.742752,0.030177346 10.052431,0.82497736 C 10.093464,3.0114774 10.134497,5.1980774 10.17553,7.3845774 C 12.760407,8.9653774 15.345284,10.546179 17.930161,12.127079 C 17.930161,12.881779 17.930161,13.636479 17.930161,14.391179 C 15.373077,13.579479 12.815993,12.767779 10.258908,11.956179 C 10.27281,13.280479 10.286713,14.604879 10.300615,15.929279 C 10.8565,16.555879 11.412385,17.182479 11.96827,17.809079 C 12.25527,18.269479 12.437605,19.641079 11.59784,19.085079 C 10.804104,18.802179 10.010367,18.519179 9.21663,18.236279 C 8.3133108,18.620779 7.4099916,19.005279 6.5066724,19.389779 C 6.3952441,18.705879 6.2272708,17.857479 6.8519879,17.359679 C 7.2927717,16.882879 7.7335555,16.406079 8.1743393,15.929279 C 8.1465467,14.604879 8.1187541,13.280479 8.0909615,11.956179 C 5.5894706,12.824879 3.0879797,13.693479 0.58648883,14.562179 C 0.54479393,13.821679 0.50309893,13.081079 0.46140403,12.340579 C 3.0184842,10.717079 5.5755645,9.0935778 8.1326447,7.4700774 C 8.1326447,5.2484774 8.1326447,3.0268774 8.1326447,0.80527736 z', 
 
     scale: 1, 
 
     strokeOpacity: 1, 
 
     strokecolor: 'black', 
 
     strokeWeight: 1, 
 
     anchor: new google.maps.Point(9, 9) 
 
    }; 
 

 

 
    var GRU = new google.maps.Polyline({ 
 
     path: [{lat: 38.771183, lng: -9.131135}, {lat: -23.6276104, lng: -46.6568016}], //Lis - GRU 
 
     strokeOpacity: 0.1, 
 
     icons: [{ 
 
       icon: planeSymbol, 
 
       offset: '0' 
 
      }], 
 
     map: map}); 
 
    animatePlane(GRU); 
 

 
    var LAD = new google.maps.Polyline({ 
 
     path: [{lat: 38.771183, lng: -9.131135}, {lat: -8.8648774, lng: 13.2249472}], //Lis - LAD 
 
     strokeOpacity: 0.1, 
 
     icons: [{ 
 
       icon: planeSymbol, 
 
       offset: '0' 
 
      }], 
 
     map: map}); 
 
    animatePlane1(LAD); 
 

 
    var MIA = new google.maps.Polyline({ 
 
     path: [{lat: 38.771183, lng: -9.131135}, {lat: 25.8027373, lng: -80.2892127}], //Lis - MIA 
 
     strokeOpacity: 0.1, 
 
     icons: [{ 
 
       icon: planeSymbol, 
 
       offset: '0' 
 
      }], 
 
     map: map}); 
 
    animatePlane2(MIA); 
 

 
    var MAD = new google.maps.Polyline({ 
 
     path: [{lat: 38.771183, lng: -9.131135}, {lat: 40.4690627, lng: -3.5599042}], //Lis - MAD 
 
     strokeOpacity: 0.1, 
 
     icons: [{ 
 
       icon: planeSymbol, 
 
       offset: '0' 
 
      }], 
 
     map: map}); 
 
    animatePlane3(MAD); 
 
    
 
    
 
    
 

 
    function animatePlane(line) { 
 
     var count = 0; 
 
     var listener = window.setInterval(function() { 
 
      count = (count + 1) % 200; 
 

 
      var icons = line.get('icons'); 
 
      icons[0].offset = (count/2) + '%'; 
 
      line.set('icons', icons); 
 
      if (count >= 199) 
 
       clearInterval(listener); 
 
     }, 2000); 
 
    } 
 

 
    function animatePlane1(line) { 
 
     var count = 0; 
 
     var listener = window.setInterval(function() { 
 
      count = (count + 1) % 200; 
 

 
      var icons = line.get('icons'); 
 
      icons[0].offset = (count/2) + '%'; 
 
      line.set('icons', icons); 
 
      if (count >= 199) 
 
       clearInterval(listener); 
 
     }, 2000); 
 
    } 
 
    
 
     function animatePlane2(line) { 
 
     var count = 0; 
 
     var listener = window.setInterval(function() { 
 
      count = (count + 1) % 200; 
 

 
      var icons = line.get('icons'); 
 
      icons[0].offset = (count/2) + '%'; 
 
      line.set('icons', icons); 
 
      if (count >= 199) 
 
       clearInterval(listener); 
 
     }, 2000); 
 
    } 
 

 
    function animatePlane3(line) { 
 
     var count = 0; 
 
     var listener = window.setInterval(function() { 
 
      count = (count + 1) % 200; 
 

 
      var icons = line.get('icons'); 
 
      icons[0].offset = (count/2) + '%'; 
 
      line.set('icons', icons); 
 
      if (count >= 199) 
 
       clearInterval(listener); 
 
     }, 2000); 
 
    } 
 

 
}

#map { 
 
    width: 900px; 
 
    height: 684px; 
 

 
}

<html> 
 
    <body>  
 
<div id="map"></div> 
 
     
 
     
 
     <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUYsLGs_ek6Ids4TN1ZZeJvv6X-r4j5N4&callback=initMap"></script> 
 
        
 
    </body> 
 
</html>

所以這只是一個樣本，但我真正的問題是，我可以模擬飛機的實際速度還是可以將它設置多少時間（小時）採用對飛機到達折線的末端？

PLS鴕鳥政策報告我的問題，只是幫助我學習！如果我題外話只是告訴我如何提高我的問題：d

Answer 1

好的，首先讓我們擺脫這四個功能。一個功能可以處理所有。

因爲它現在是一個通用的功能，我們需要的參數指定我們正在處理什麼。

作爲參數我選擇步驟（=步數），和stepTime（步驟之間的毫秒數）。我可以選擇不同的參數，如速度和總時間，但這只是簡單的計算。

不管怎樣，作爲一個例子，我設置20步到馬德里，stepTime 2秒，所以你有40秒。

你能處理的計算？或者你需要什麼具體的東西？搜索距離，猜測理想的步驟時間，...... Deepak的答案爲您提供了一個距離計算器和一種思考方式......

不管怎麼說，讓我知道

<script> 
// http://stackoverflow.com/questions/42225019/how-can-i-set-the-speed-of-a-symbol-moving-on-a-polyline#42225019 
function initMap() { 

var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 3, 
    center: {lat: 12.1336018, lng: -15.1832411}, 
    mapTypeId: 'terrain' 
}); 
//Define the custom symbols. All symbols are defined via SVG path notation. 
// They have varying stroke color, fill color, stroke weight, 
// opacity and rotation properties. 
var planeSymbol = {path: 'M 8.1326447,0.80527736 C 8.5471666,0.063577346 9.742752,0.030177346 10.052431,0.82497736 C 10.093464,3.0114774 10.134497,5.1980774 10.17553,7.3845774 C 12.760407,8.9653774 15.345284,10.546179 17.930161,12.127079 C 17.930161,12.881779 17.930161,13.636479 17.930161,14.391179 C 15.373077,13.579479 12.815993,12.767779 10.258908,11.956179 C 10.27281,13.280479 10.286713,14.604879 10.300615,15.929279 C 10.8565,16.555879 11.412385,17.182479 11.96827,17.809079 C 12.25527,18.269479 12.437605,19.641079 11.59784,19.085079 C 10.804104,18.802179 10.010367,18.519179 9.21663,18.236279 C 8.3133108,18.620779 7.4099916,19.005279 6.5066724,19.389779 C 6.3952441,18.705879 6.2272708,17.857479 6.8519879,17.359679 C 7.2927717,16.882879 7.7335555,16.406079 8.1743393,15.929279 C 8.1465467,14.604879 8.1187541,13.280479 8.0909615,11.956179 C 5.5894706,12.824879 3.0879797,13.693479 0.58648883,14.562179 C 0.54479393,13.821679 0.50309893,13.081079 0.46140403,12.340579 C 3.0184842,10.717079 5.5755645,9.0935778 8.1326447,7.4700774 C 8.1326447,5.2484774 8.1326447,3.0268774 8.1326447,0.80527736 z', 
    scale: 1, 
    strokeOpacity: 1, 
    strokecolor: 'black', 
    strokeWeight: 1, 
    anchor: new google.maps.Point(9, 9) 
}; 

var GRU = new google.maps.Polyline({ 
    path: [{lat: 38.771183, lng: -9.131135}, {lat: -23.6276104, lng: -46.6568016}], //Lis - GRU 
    strokeOpacity: 0.1, 
    icons: [{ 
      icon: planeSymbol, 
      offset: '0' 
     }], 
    map: map}); 
var LAD = new google.maps.Polyline({ 
    path: [{lat: 38.771183, lng: -9.131135}, {lat: -8.8648774, lng: 13.2249472}], //Lis - LAD 
    strokeOpacity: 0.1, 
    icons: [{ 
      icon: planeSymbol, 
      offset: '0' 
     }], 
    map: map}); 
var MIA = new google.maps.Polyline({ 
    path: [{lat: 38.771183, lng: -9.131135}, {lat: 25.8027373, lng: -80.2892127}], //Lis - MIA 
    strokeOpacity: 0.1, 
    icons: [{ 
      icon: planeSymbol, 
      offset: '0' 
     }], 
    map: map}); 
var MAD = new google.maps.Polyline({ 
    path: [{lat: 38.771183, lng: -9.131135}, {lat: 40.4690627, lng: -3.5599042}], //Lis - MAD 
    strokeOpacity: 0.1, 
    icons: [{ 
      icon: planeSymbol, 
      offset: '0' 
     }], 
    map: map}); 
// call the function for all flight paths 
animatePlaneLine(GRU, 100, 200); // 100 steps at an interval of 0.2 seconds 
animatePlaneLine(LAD, 200, 2000); 
animatePlaneLine(MIA, 200, 2000); 
animatePlaneLine(MAD, 20, 2000); // 20 steps, at an interval of 2 seconds 

// One function to rule them all  
function animatePlaneLine(line, steps, stepTime) { 
    var count = 0; // it counts from 0 to (parameter) steps, then cycles. 
    var listener = window.setInterval(function() { 
    count = (count + 1) % steps; 
    var icons = line.get('icons'); 
    icons[0].offset = (100 * count/steps) + '%'; 
    line.set('icons', icons); 
    }, stepTime); 
    // you don't need this return, but you could use it for extra control, like if you have buttons to pause/stop/start the animation. 
    return listener; 
} 
} 
</script> 

Answer 2

所以你有一個自定義的速度動畫標記。這可以通過設置setinterval的間隔很容易完成。但主要的任務是如何設置特定的時間間隔。

你可以建立一個邏輯。

得到2點之間的距離。基本上2拉特長。

function getDistanceFromLatLonInKm(lat1,lon1,lat2,lon2) { 
    var R = 6371; // Radius of the earth in km 
    var dLat = deg2rad(lat2-lat1); // deg2rad below 
    var dLon = deg2rad(lon2-lon1); 
    var a = 
    Math.sin(dLat/2) * Math.sin(dLat/2) + 
    Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * 
    Math.sin(dLon/2) * Math.sin(dLon/2) 
    ; 
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
    var d = R * c; // Distance in km 
    return d; 
} 

function deg2rad(deg) { 
    return deg * (Math.PI/180) 
} 

現在允許距離爲1000公里

在飛機上的avrage速度217.76公里每小時

所以你會在4小時內到達4000公里，所以你必須設置你的時間間隔as 14440

我知道它很慢。但它的實際模擬你的飛機。

您可以在HTML頁面中根據這段時間顯示剩餘時間。

希望你可以爲它寫邏輯。這很容易！！