最新のgoogle map apiでマーカーをゆっくり動かす方法

Question

1つの場所から別の場所へ飛行する必要のあるWebアプリケーションを構築しています。空港を建設して航空機をマーカーとして配置し、航空機のマーカーをある場所から別の場所に移動する方法を説明します。

Answer 1

次を利用することにより、それを達成することができます

var lineSymbol = { 
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, 
    scale: 3, // change the size 
    strokeColor: '#393' 
    }; 

あなたは飛行機などが必要な場合は、これを変更することに自分自身を見てする必要があります。..

あなたはそれのためのポリラインを実装する必要があります従うこと：

// Create the polyline and add the symbol to it via the 'icons' property. 
    var line = new google.maps.Polyline({ 
    path: [{ 
     lat: 51.4700, 
     lng: 0.4543 
    }, { 
     lat: 50.1109, 
     lng: 8.6821 
    }, { 
     lat: 55.9533, 
     lng: 3  
    }, { 
     lat: 51.4700, 
     lng: 0.4543 
    }, 
    ], 
    strokeColor: '#FF0000', 
    strokeOpacity: 1.0, 
    strokeWeight: 0, // change this value to show/hide the line 
    icons: [{ 
     icon: lineSymbol, 
     offset: '100%' 
    }], 
    map: map 
    }); 

    animateCircle(line); 
} 

を最後に、我々は、ライン上のシンボルをアニメーション化する方法を追加する必要があります。

function animateCircle(line) { 
    var count = 0; 
    window.setInterval(function() { 
    count = (count + 1) % 200; // change this to 1000 to only show the line once 
    var icons = line.get('icons'); 
    icons[0].offset = (count/2) + '%'; 
    line.set('icons', icons); 
    }, 50); // change this value to change the speed 
} 

JSFIDDLE：https://jsfiddle.net/tu4s6302/3/