LUNARAVE WEBクリエイターの仕事と休息

アクセスカウンタ

Google Maps APIの利用戦国IXAWeb技術Youtubeチャンネル

zoom RSS Google Maps v3の利用 -(5)複数クリック箇所を配列にしポリゴン表示する-

<<   作成日時 : 2015/02/02 12:30   >>

ブログ気持玉 0 / トラックバック 0 / コメント 0

前回は地図を移動させると地図の中心座標を取得するところまで実装し、そのソースの続きで次の段階へ進む。

今回はクリックした箇所を保存するために配列を用意する。
さらに複数クリックした箇所の座標を使ってポリゴンで塗りつぶす。
->Google Maps v3の利用 -(4)地図を移動させて地図の中心座標を取得する-

前回追加した「マップ移動時のイベント処理」の下に下記コードを追記する。


// ▽マップ移動のイベント処理
[省略:前回記事参照]
// △マップ移動のイベント処理

// ▽クリックした地点の座標を取得
var event_c = new google.maps.event.addListener(map, "click", function(evt) {
var point_c = evt.latLng;
var lat_c = point_c.lat();
var lng_c = point_c.lng();

points.push( new google.maps.LatLng(lat_c, lng_c) );

var view_p_c = "";
for ( var i = 0; i < points.length; ++i ) {
view_p_c = view_p_c + points[i] + "
";
}
document.getElementById("c_point").innerHTML = view_p_c;
d_polygon();
});
// △クリックした地点の座標を取得



上記コードはfunction「initialize()」の中に記述したが、ポリゴン描画用にもう一つfunction「d_polygon()」を用意する。


function d_polygon() {
var polygon_c = new google.maps.Polygon({
paths: points, //頂点配列名
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.8,
map: map
});
}



これをブラウザで確認し、4箇所クリックすると下図の動きとなる。

 複数クリック箇所を配列にしポリゴン表示する


複数個所の座標を取得できると今回のように領域を塗りつぶしたり、2点間の距離を測定したりと用途が広がる。
ポリゴン表示は座標が多ければ精度の高い細かな地域指定が可能になり、防災での危険地帯やイベント会場の範囲指定などに利用できる。

テーマ

注目テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
Google Maps v3の利用 -(5)複数クリック箇所を配列にしポリゴン表示する- LUNARAVE WEBクリエイターの仕事と休息/BIGLOBEウェブリブログ
文字サイズ:       閉じる