Google Maps 矢印線を引く V3

---

取り扱い方

Google Maps V3 矢印線を引く　コード

---

初期画面



①：矢印の形を選択

②：実線か破線の選択

③：編集や移動を可能にするか選択

④：線の色を選びます。クリックすると以下のようなカラーピッカーが表示されますのでここから選択




地図上をクリックしてラインを設定します。

先頭にアローヘッド・実線・編集可能・移動可能・線の色：#FF0000

で描画した場合。



設定の変更は動的に反映されます。

両端にアローヘッド・破線・編集不可・移動可能・線の色：#003300

に変更した場合。

---

GoogleMaps V3の 矢印線を引く　コード

破線の場合の点線やアローヘッドはシンボルとし扱われます。

ポリラインの上にシンボルが乗っかっているという形です。

従って、破線の場合はその下のポリラインのOpacityを０にする必要があります。

//ラインの座標用配列
var polygonsArray = [];


//配列に座標をセット
var color = "#ff0000";//赤
var weight = 3;
var editable = true;
var draggable = true;


function addArrowline(polygonsArray,color,weight,editable,draggable){
    var strokeopacity;//0:ラインの線を隠す
    var icon_symbol = [];
    
    //点線シンボル
    var lineSymbol = {
        path: 'M 0,-1 0,1',
        strokeOpacity:1,
        scale: 4
    };
    
    //アローヘッドを定義
    //先頭
    var headArrow = {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        fillOpacity:1,
        fillColor:color,
        strokeColor:color,
        strokeOpacity:1
    };
    //お尻
    var tailArrow = {
        path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
        fillOpacity:1,
        fillColor:color,
        strokeColor:color,
        strokeOpacity:1
    };
    
    
    
    if (poly_type == "solid"){//実線
        if (arrow_type == "head"){
            //実線　head
            icon_symbol =  [{
                icon: headArrow,
                offset: '100%'
            }];
            
            strokeopacity = 1;
        }else if (arrow_type == "both"){
            //実線　both
            icon_symbol =  [{
                icon: headArrow,
                offset: '100%'
            },{
                icon: tailArrow,
                offset: '0%'
            }];
            
            strokeopacity = 1;
        }else if (arrow_type == "tail"){
            //実線　tail
            icon_symbol =  [{
                icon: tailArrow,
                offset: '0%'
            }];
            
            strokeopacity = 1;
        }
        
    }else if (poly_type == "dashed"){//破線
        if (arrow_type == "head"){
            //破線　head
            icon_symbol =  [{
                icon: headArrow,
                offset: '100%'
            },{
                icon: lineSymbol,
                offset: '0',
                repeat: '20px'
            }];
            
            strokeopacity = 0;
        }else if (arrow_type == "both"){
            //破線　both
            icon_symbol =  [{
                icon: headArrow,
                offset: '100%'
            },{
                icon: lineSymbol,
                offset: '0',
                repeat: '20px'
            },
            {
                icon: tailArrow,
                offset: '0%'
            }];
            
            strokeopacity = 0;
        }else if (arrow_type == "tail"){
            //破線　tail
            icon_symbol =  [{
                icon: tailArrow,
                offset: '0%'
            },{
                icon: lineSymbol,
                offset: '0',
                repeat: '20px'
            }];
            
            strokeopacity = 0;
        }
    }
    
    
    
    arrowline = new google.maps.Polyline({
        path:lineCoordinates,
        strokeOpacity: 0,
        icons:icon_symbol,//シンボル
        strokeColor:color,
        strokeOpacity:strokeopacity,//実線・破線
        strokeWeight:weight,
        editable:editable,
        draggable:draggable,
        map:googlemap
    });
}