Google Maps 中抜きポリゴン V3




取り扱い方

Google Maps 中抜きポリゴン コード




初期画面



:大外のポリゴンを作成:クリックは時計周り

:内側のポリゴンを作成:クリックは反時計周り

:中抜きのポリゴンを作成します

地図上をクリックしてエリアを設定します。

まず、大外のエリアを描画。



次に、内側のエリアを描画する場合は、ラジオボタンをクリックしてから描画。



描画は、大外のエリア上で描画してもいいですし、外部で描画してドラッグ・ドロップしてもいいです。



最後に「中抜きポリゴン作成」ボタンをクリック。



このポリゴンは大外ポリゴンから内側ポリゴンの領域が抜けたものなので、そのままドラッグできます。








GoogleMaps V3の 中抜きポリゴン コード

ポリゴンの内外を決めるのにポイントの配列が内側と外側で逆向きであることが必要です。



//外側のポリゴンの配列
var outer_lineCoordinates = [];
//内側のポリゴンの配列
var inner_lineCoordinates = [];
//


//outer_lineCoordinatesとinner_lineCoordinatesに値をセット



//ポリゴン中抜き
var points = new google.maps.MVCArray(); 
points = [outer_lineCoordinates,inner_lineCoordinates]; 

var polyoptions = { 
    paths: points, 
    strokeWeight: 3, 
    strokeColor: "#ff0000", 
    strokeOpacity: 0.6, 
    fillColor: "#aaa0ff", 
    fillOpacity: 0.35,
    editable:chk_editable,
    draggable:chk_draggable
}; 
extraction_polygon = new google.maps.Polygon(polyoptions); 
extraction_polygon.setMap(googlemap);