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

Question

我正在为我的实习创建一个项目，我有一些飞机在 google 地图的折线上移动。我想以简单的方式创建我的项目，因为我几乎没有经验，也许我做错了，这就是我寻求帮助的原因。 You can see what i'm talking about here

我现在有 4 架飞机，所以我必须为每架飞机创建一个功能，因为如果我不这样做，去西班牙的飞机和去巴西的飞机同时到达，它们都在同时。

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

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>

所以这只是一个示例，但我真正的问题是我可以模拟飞机的实际速度，还是可以设置飞机到达折线末端所需的时间（以小时为单位）？

请不要报告我的问题，只是帮助我学习！如果我跑题了，请告诉我如何改进我的问题 :D

Answer 1

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

你可以建立一个逻辑。

获取两点之间的距离。基本上是 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 KM

飞机在空中的平均速度是217.76km/h

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

我知道它很慢。但它实际模拟了你的飞机。

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

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

Answer 2

好吧，首先让我们摆脱这四个功能。一个函数搞定所有。

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

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

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

你会计算吗？或者你需要什么特别的东西吗？搜索距离，估计理想的步数时间，... Deepak 的答案为您提供了一个距离计算器，以及一种思考方式...

无论如何，让我知道

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

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

How can I set the speed of a symbol moving on a polyline

javascript

google-maps

google-polyline