- GoogleMap
- 2013-09-06 - 更新:2017-10-25
GoogleMapを利用し、図形を描画して囲った部分の面積を求めることができます。
ネットで探しましたが、バージョン3で組まれたものが見当たらなかったので書いておきます。
計測にはというジオメトリライブラリのユーティリティ関数(google.maps.geometry.spherical
)を使用します。
コードはGoogleMapオブジェクト(map)は既に作成済のものとして書いています。
ついでに、距離も計測できるようにしています。
ご参考になれば幸いです。
ちなみに、某メーカーの住宅地図ソフトでの面積計測と精度は変わりませんでした。
GoogleMapAPI version 3.21
PolygonOptionsクラス
var myPolygonOptions = { clickable: false, // クリックイベントの有効/無効 fillColor: "#ffffff", // 塗り潰し色 fillOpacity: 0.6, // 塗り潰しの不透明度(0.0-1.0) map: map, // GoogleMapのインスタンス paths: new Array(), // 座標の配列 strokeColor: "#000000", // 線の色 strokeOpacity: 0.8, // 線の不透明度(0.0-1.0) strokeWeight: 3 // 線の太さ(ピクセル) }
Polygonクラス
// Polygon用グローバル変数 var poly; var myPolygon = { make: function() { poly = new google.maps.Polygon(myPolygonOptions); // マウスカーソルを矢印に設定 myOptions.draggableCursor = "default"; myOptions.draggingCursor = "default"; map.setOptions(myOptions); // 既にマップにクリックイベントを設定していたらクリアする google.maps.event.clearListeners(map, "click"); // マップのクリックイベントに図形描画 google.maps.event.addListener(map, "click", function(e) { if(e) { myPolygonOptions.paths.push(new google.maps.LatLng(e.latLng.lat(), e.latLng.lng())); poly.setPaths(myPolygonOptions.paths); poly.setMap(map); // 面積計測のための図形座標の配列を別途作成 // 別に作成しないと続きを描画できない(計測するには図形を閉じないといけないため) var thisPoly = new Array(); for(var i = 0; i < myPolygonOptions.paths.length; i++) { thisPoly.push(myPolygonOptions.paths[i]); } // 面積を計測するには図形が閉じている必要があるので、最後に開始点を追加 thisPoly.push(myPolygonOptions.paths[0]); // 面積を計測し、小数点以下2位で切り上げ var a = google.maps.geometry.spherical.computeArea(thisPoly); a *= 100; a = Math.ceil(a); a /= 100; alert("面積:" + a + "平米"); if(myPolygonOptions.paths.length > 1) { // 最終点から1つ前の座標 var from = myPolygonOptions.paths[myPolygonOptions.paths.length - 2]; // 最終点の座標 var to = myPolygonOptions.paths[myPolygonOptions.paths.length - 1]; // 2点間の距離を計測 var d = google.maps.geometry.spherical.computeDistanceBetween(from, to); // 距離を小数点以下2位で切り上げ d *= 100; d = Math.ceil(d); d /= 100; alert("最終2点間の距離:" + d + "m"); } } }); }, clear: function() { // 描画した図形の削除 myPolygonOptions.paths = new Array(); poly.setPaths(new Array()); poly.setMap(map); } }
【実装例】
mapオブジェクトを作成した後で以下を実行してください
myPolygon.make();
描画した図形を削除するときは
myPolygon.clear();
【公式】Google Maps Javascript API V3 Reference
https://developers.google.com/maps/documentation/javascript/reference?hl=ja
こちらのドキュメントがとても参考になりました。
Google Maps JavaScript API V3
http://ryo59.com/reference/index.html
・マウスカーソルの形状について
カーソルの形状は、W3Cで定義されているものは使えるようです。
http://www.w3.org/TR/2004/CR-CSS21-20040225/ui.html
GoogleMapAPI version 3.26
バージョンが上がったからか、マウスカーソルの設定がうまく動作しないようになってたので修正。
描画した図形の削除と同時にマウスカーソルを元に戻し、クリックイベントもクリアするメソッドも追加しました。
ついでに坪数計算も入れておきました。
修正版(2017/10/25)
var myPolygon = { make: function(area_id, area_tubo_id, distance_id) { poly = new google.maps.Polygon(myPolygonOptions); // マウスカーソルを矢印に設定 myOptions.draggableCursor = "default"; myOptions.draggingCursor = "default"; map.setOptions( { draggableCursor: "default", draggingCursor: "default" } ); // 既にマップにクリックイベントを設定していたらクリアする google.maps.event.clearListeners(map, "click"); // マップのクリックイベントに図形描画 google.maps.event.addListener(map, "click", function(e) { if(e) { myPolygonOptions.paths.push(new google.maps.LatLng(e.latLng.lat(), e.latLng.lng())); poly.setPaths(myPolygonOptions.paths); poly.setMap(map); // 面積計測のための図形座標の配列を別途作成 // 別に作成しないと続きを描画できない(計測するには図形を閉じないといけないため) var thisPoly = new Array(); for(var i = 0; i < myPolygonOptions.paths.length; i++) { thisPoly.push(myPolygonOptions.paths[i]); } // 面積を計測するには図形が閉じている必要があるので、最後に開始点を追加 thisPoly.push(myPolygonOptions.paths[0]); // 面積を計測し、小数点以下2位で切り上げ var a = google.maps.geometry.spherical.computeArea(thisPoly); a *= 100; a = Math.ceil(a); a /= 100; alert("面積:" + a + "平米"); // 面積を坪数に変換し、小数点以下2位で切り上げ var tubo = a * 0.3025; tubo *= 100; tubo = Math.ceil(tubo); tubo /= 100; alert("面積:" + tubo + "坪"); if(myPolygonOptions.paths.length > 1) { // 最終点から1つ前の座標 var from = myPolygonOptions.paths[myPolygonOptions.paths.length - 2]; // 最終点の座標 var to = myPolygonOptions.paths[myPolygonOptions.paths.length - 1]; // 2点間の距離を計測 var d = google.maps.geometry.spherical.computeDistanceBetween(from, to); // 距離を小数点以下2位で切り上げ d *= 100; d = Math.ceil(d); d /= 100; alert("最終2点間の距離:" + d + "m"); } } }); }, clear: function() { // 描画した図形の削除 myPolygonOptions.paths = new Array(); poly.setPaths(new Array()); poly.setMap(map); }, destroy: function() { this.clear(); // マウスカーソルを元に戻す myOptions.draggableCursor = null; myOptions.draggingCursor = null; map.setOptions( { draggableCursor: null, draggingCursor: null } ); // マップのクリックイベントをクリア google.maps.event.clearListeners(map, "click"); }, }