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

时间：2017-02-14 11:30:58

标签： javascript google-maps google-polyline

我正在为我的实习创建一个项目，我有一些平面在谷歌地图上的折线上移动。我想以简单的方式创建我的项目，因为我几乎没有经验，也许我正在以错误的方式制作这个，这也就是我寻求帮助的原因。 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>
   

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

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

2 个答案:

答案 0 :(得分：1)

因此，您可以在自定义速度上设置动画标记。这可以通过设置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公里

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

所以你将在4小时内达到4000公里，所以你必须将你的间隔设置为14440

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

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

希望你能为它编写逻辑。很容易!!

答案 1 :(得分：1)

好的，首先让我们摆脱这四个功能。一个功能可以处理所有。

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

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

无论如何，作为一个例子，我设置了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>
相关问题
最新问题