Google Maps ポリゴン・ポリラインについて

取り扱い方

Google Maps V3 ポリゴン・ポリライン　コード

初期画面

①：ポリゴンのラジオボタンをクリックして有効

    多角形の場合、地図上でクリックして作成
    円の場合、地図上で1度クリック、マウスをドラッグして半径を出し、再度クリックして描画
    矩形の場合、地図上で1度クリック、マウスをドラッグして対角線を出し、再度クリックして描画

②：編集可能/不可、移動可能/不可

③：ポリラインのラジオボタンをクリックして有効

    実線か破線かを選択、描画中でも設定変更可能

④：線の色を設定、クリックしてカラーピッカーを表示

⑤：編集可能/不可、移動可能/不可

GoogleMaps V3のポリゴン・ポリライン　コード

【多角形】

var coordinatesArray = [];

//coordinatesArrayに座標セット


var strokecolor = "#FF0000";//外周の線の色
var strokeopacity = 1;//外周の線の透明度
var weight = 3;//外周の線の太さ
var fillcolor = "#FF0000";//内部の色
var fillopacity = 0.35;//内部の透明度

function addPolygon(){
    var polygon = new google.maps.Polygon({
        paths: coordinatesArray,
        strokeColor:strokecolor,
        strokeOpacity:strokeopacity,
        strokeWeight:weight,
        fillColor:fillcolor,
        fillOpacity:fillopacity,
        editable:true,
        draggable:true
    });
    polygon.setMap(googlemap);
    
    //
    google.maps.event.addListener(polygon, 'click', polygon_click);
    
    
    //編集
    google.maps.event.addListener(polygon.getPath(), 'insert_at', function() {
      //
      
    });
    
    google.maps.event.addListener(polygon.getPath(), 'remove_at', function() {
      //
      
    });
    
    google.maps.event.addListener(polygon.getPath(), 'set_at', function() {
      //
      
    });
    
    
}

【円】

var center = new google.maps.LatLng(緯度,経度);//円の中心座標
var radius = 2000;//円の半径,単位ｍ
var strokecolor = "#FF0000";//円周の線の色
var strokeopacity = 1;//円周の線の透明度
var weight = 3;//円周の線の太さ
var fillcolor = "#FF0000";//内部の色
var fillopacity = 0.35;//内部の透明度


function addCirclepolygon(){
    var circleOptions = {
        strokeColor:strokecolor,
        strokeOpacity:strokeopacity,
        strokeWeight:weight,
        fillColor:fillcolor,
        fillOpacity:fillopacity,
        map:googlemap,
        center:center,
        radius:radius,
        editable:true,
        draggable:true
    };
    
    var CirclePolygon = new google.maps.Circle(circleOptions);
    
    google.maps.event.addListener(CirclePolygon, 'click', circlerect_click);
    
    //編集
    google.maps.event.addListener(CirclePolygon, 'radius_changed', function() {
      //
      var radius = CirclePolygon.getRadius();
      
    });
    
    google.maps.event.addListener(CirclePolygon, 'center_changed', function() {
      //
      var center = CirclePolygon.getCenter();
      
    });
    
    
}

【矩形】

var southWest = new google.maps.LatLng(南西の緯度,南西の経度);
var northEast = new google.maps.LatLng(北東の緯度,北東の経度);
var bounds = new google.maps.LatLngBounds(southWest,northEast);
var strokecolor = "#FF0000";//矩形の線の色
var strokeopacity = 1;//矩形の線の透明度
var weight = 3;//矩形の線の太さ
var fillcolor = "#FF0000";//内部の色
var fillopacity = 0.35;//内部の透明度



function addRectpolygon(){
    var RectPolygon = new google.maps.Rectangle();
    
    var rectOptions = {
        strokeColor:strokecolor,
        strokeOpacity:strokeopacity,
        strokeWeight:weight,
        fillColor:fillcolor,
        fillOpacity:fillopacity,
        map:googlemap,
        bounds:bounds,
        editable:true,
        draggable:true
    };
    
        RectPolygon.setOptions(rectOptions);
    
    google.maps.event.addListener(RectPolygon, 'click', circlerect_click);
    //編集
    google.maps.event.addListener(RectPolygon, 'bounds_changed', function() {
        //
        var ne = RectPolygon.getBounds().getNorthEast();
      var sw = RectPolygon.getBounds().getSouthWest();
      
    });
}

【実線・破線】

var lineCoordinates = [];

//lineCoordinatesに座標をセット

var polyline_type = "solid";//実線か破線かを指定
var weight = 3;//線の太さ
var color = "#FF0000";//線の色

function addPolylines(){
    var strokeopacity;//0:ポリラインの線を隠す,1:ポリラインの線を出す
    var icon_symbol = [];
    
    var lineSymbol = {
        path: 'M 0,-1 0,1',
        strokeOpacity:1,
        scale: 4
    };
    
    
    if (polyline_type == "solid"){//実線
        strokeopacity = 1;
        
    }else if (polyline_type == "dashed"){//破線
        icon_symbol =  [{
            icon: lineSymbol,
            offset: '0',
            repeat: '20px'
        }];
        
        strokeopacity = 0;
    }
    
    
    
    polylines = new google.maps.Polyline({
        path:lineCoordinates,
        strokeOpacity: 0,
        icons:icon_symbol,//
        strokeColor:color,
        strokeOpacity:strokeopacity,//
        strokeWeight:weight,
        editable:true,
        draggable:true,
        map:googlemap
    });
    
}