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

Question

我正在为我的实习创建一个项目，并且我有一些飞机在Google Maps中移动。我想以简单的方式创建我的项目，因为我几乎没有经验，也许我以错误的方式做了这个项目，这就是为什么我要寻求帮助。您可以在这里看到我在说什么

我目前有4架飞机，所以我不得不为每个飞机创建一个功能，因为如果我没有飞机到达同时到达巴西的飞机，他们俩都在同一飞机上起飞时间。

这是我目前拥有的，所以我创建了服装路径符号，然后创建了polylines。

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>

所以这只是一个样本，但我的真正问题是我可以模拟飞机的真实速度，还是可以设置几次（小时）到达plach的时间才能到达多线末端？

请不要报告我的问题，只要帮助我学习！如果我没有话题，请告诉我如何提高问题：D

Answer 1

好吧，首先让我们摆脱这四个功能。一个功能可以处理全部。

由于现在是一个通用函数，我们需要参数来指定我们要处理的内容。

作为参数，我选择了步骤（=步骤数）和步骤（步骤之间的毫秒数）。我本可以选择不同的参数，例如速度和总时间，但这只是简单的计算。

无论如何，作为一个例子，我将20个步骤设置为马德里，步骤2秒，所以您在40秒内到达那里。

您可以处理计算吗？还是您需要具体的东西？搜索距离，宾客理想的步骤，...迪帕克的答案为您提供了一个距离计算器，并考虑了它的思维方式...

无论如何，让我知道

<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个lat。

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 km

空气中飞机的空速速度为217.76 km/h

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

我知道它非常慢。但是它对飞机的实际模拟。

您可以在HTML页面中根据此时间显示剩余时间。

希望您可以为此编写逻辑。它很容易！