Javascript 如何设置符号在多段线上移动的速度

我正在为我的实习创建一个项目，我有一些飞机在谷歌地图的多段线上移动。我想以简单的方式创建我的项目，因为我几乎没有经验，也许我做得不对，这就是为什么我寻求帮助

我现在有4架飞机，所以我必须为每架飞机创建一个函数，因为如果我不这样做的话，飞往西班牙的飞机与飞往巴西的飞机会在同一时间到达，而且它们都是在同一时间起飞的

这就是我现在拥有的，所以我创建了肋路径符号，然后是多段线

函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：3，
中心：{lat:12.1336018，lng:-15.1832411}，
mapTypeId:'地形'
});
//定义自定义符号。所有符号都通过SVG路径表示法定义。
//它们有不同的笔划颜色、填充颜色、笔划重量，
//不透明度和旋转属性。
变量平面符号=路径：：，0.0635777 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 0 0 0 0 0 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 6 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 5 7 7 7 7 7 7 7 7 15 15.3452828284 4 4 4 4 4 4 4 4 4 4，10.5 5 5 5 5 5 5 5 5 5 5 5 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 956179 C 10。7.9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 10 10 10 10 10 10 10 10 10 10 10 10 10 10 6 6 6 6 5 5 5 5 5 5 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 11 11 11 11 11 9 9 9 9 9 9 9 9 9 9 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 6.8519879，7.404040404079 0 0 0.58646483838 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 7 7 7 7 7 7 7 7 7 7 7 7 7 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 6447,5.2484774 8.1326447,3.0268774 8.1326447,0.80527736 z'，
比例：1，
频闪不透明度：1，
strokecolor:'黑色'，
冲程重量：1，
主持人：新谷歌地图点（9，9）
};
var GRU=new google.maps.Polyline({
路径：[{lat:38.771183，lng:-9.131135}，{lat:-23.6276104，lng:-46.6568016}]，//Lis-GRU
笔划不透明度：0.1，
图标：[{
图标：平面符号，
偏移量：“0”
}],
map:map}）；
动画平面（GRU）；
var LAD=new google.maps.Polyline({
路径：[{lat:38.771183，lng:-9.131135}，{lat:-8.8648774，lng:13.2249472}]，//Lis-LAD
笔划不透明度：0.1，
图标：[{
图标：平面符号，
偏移量：“0”
}],
map:map}）；
动画平面1（LAD）；
var MIA=new google.maps.Polyline({
路径：[{lat:38.771183，lng:-9.131135}，{lat:25.8027373，lng:-80.2892127}]，//Lis-MIA
笔划不透明度：0.1，
图标：[{
图标：平面符号，
偏移量：“0”
}],
map:map}）；
动画平面2（MIA）；
var MAD=新的google.maps.Polyline({
路径：[{lat:38.771183，lng:-9.131135}，{lat:40.4690627，lng:-3.5599042}]，//Lis-MAD
笔划不透明度：0.1，
图标：[{
图标：平面符号，
偏移量：“0”
}],
map:map}）；
动画计划3（MAD）；
函数动画平面（直线）{
var计数=0；
var listener=window.setInterval（函数（）{
计数=（计数+1）%200；
var icons=line.get（'icons'）；
图标[0]。偏移量=（计数/2）+'%'；
行。设置（'图标'，图标）；
如果（计数>=199）
clearInterval（监听器）；
}, 2000);
}
函数animatePlane1（行）{
var计数=0；
var listener=window.setInterval（函数（）{
计数=（计数+1）%200；
var icons=line.get（'icons'）；
图标[0]。偏移量=（计数/2）+'%'；
行。设置（'图标'，图标）；
如果（计数>=199）
clearInterval（监听器）；
}, 2000);
}
函数animatePlane2（行）{
var计数=0；
var listener=window.setInterval（函数（）{
计数=（计数+1）%200；
var icons=line.get（'icons'）；
图标[0]。偏移量=（计数/2）+'%'；
行。设置（'图标'，图标）；
如果（计数>=199）
clearInterval（监听器）；
}, 2000);
}
函数animatePlane3（行）{
var计数=0；
var listener=window.setInterval（函数（）{
计数=（计数+1）%200；
var icons=line.get（'icons'）；
图标[0]。偏移量=（计数/2）+'%'；
行。设置（'图标'，图标）；
如果（计数>=199）
clearInterval（监听器）；
}, 2000);
}
}

#地图{
宽度：900px；
高度：684px；
}

---

因此，您可以在自定义速度上设置动画标记。这可以通过设置setinterval的间隔轻松完成。但主要任务是如何设置特定间隔

你可以建立一个逻辑

得到两点之间的距离，基本上是两个拉长

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公里

飞机在空中的平均飞行速度为217.76公里/小时

因此，您将在4小时内达到4000公里，因此您必须将间隔设置为14440公里

我知道它很慢，但它实际上是模拟你的飞机

您可以在HTML页面中显示基于此时间的剩余时间

---

希望你能为它编写逻辑。很简单！！

所以你有一个自定义速度的动画标记。这可以通过设置setinterval的间隔来轻松完成。但主要任务是如何设置特定的间隔

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