google-maps - Google マップのトラッキング パスに方向を追加する方法

Question

マーカー ポイントとそれらを結ぶ線を使用して、地図上に追跡を表示しています。

問題は、リンクの移動方向を表示したいということです。

そのため、マーカー ポイント間の線の方向を表示する方法がわかりません。

このタスクを達成する方法はありますか。

Answer 1

ポリラインに方向を表示するには、矢印を使用します。

グーグルマップapi3が提供するいくつかの事前定義されたパスがあります。

ドキュメントのこのセクション（ 矢印以外で使用できるSYMBOLS ON POLYLINE ）を参照してください。

矢印を使用してポリライン上の方向を示すこのフィドルを見てください。

単一記号の付いたデモ

シンボルのプロパティを設定して、repeat一定の間隔で繰り返されるようにすることもできます。

シンボルを繰り返すデモ

JavaScript-

var iconsetngs = {
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
var polylineoptns = {
    path: markers,
    strokeOpacity: 0.8,
    strokeWeight: 3,
    map: map,
    icons: [{
        icon: iconsetngs,
        offset: '100%'}]
};
polyline = new google.maps.Polyline(polylineoptns);

この事前定義されたシンボル（特に前方矢印）の興味深い機能は、矢印が座標が配置されている正確な方向を指していることです。したがって、それは明らかに追跡システムで方向を示す目的を果たします。

更新：コメントで伝えようとしているポイントについてはよくわかりません。マーカーも同じように表示できます。ループでマーカーを追加し、矢印でポリラインを設定するコードは次のとおりです。

マーカーとポリラインを使用したデモ

Javascript：

var polylineoptns = {
        strokeOpacity: 0.8,
        strokeWeight: 3,
        map: map,
        icons: [{
            repeat: '70px', //CHANGE THIS VALUE TO CHANGE THE DISTANCE BETWEEN ARROWS
            icon: iconsetngs,
            offset: '100%'}]
    };
    polyline = new google.maps.Polyline(polylineoptns);
    var z = 0;
    var path = [];
    path[z] = polyline.getPath();
    for (var i = 0; i < markers.length; i++) //LOOP TO DISPLAY THE MARKERS
    {
        var pos = markers[i];
        var marker = new google.maps.Marker({
            position: pos,
            map: map
        });
        path[z].push(marker.getPosition()); //PUSH THE NEWLY CREATED MARKER'S POSITION TO THE PATH ARRAY
    }