[GMaps API v3] geometryライブラリを使って距離や面積を測る。

Google Maps APIのgeometryライブラリを使用すると、地図上の地点間の距離や面積を簡単に取得することができます。

サンプルコード

geometryライブラリを使用する際はGoogle Maps APIの読み込み時に「libraries=geometry」を付けて読み込みます。

<script src="http://maps.googleapis.com/maps/api/js?v=3.6&sensor=false&libraries=geometry"></script>

1	<script src="http://maps.googleapis.com/maps/api/js?v=3.6&sensor=false&libraries=geometry"></script>

google.maps.event.addDomListener(window, "load", initialize);


function initialize() {
    google.maps.visualRefresh=true;　//Google map新スタイルを使用
    
    //Mapオブジェクトを作成
    var mapDiv = document.getElementById("map_canvas");
    var mapObj = new google.maps.Map(mapDiv, {
        center : new google.maps.LatLng(36.322356, 139.013057),
        zoom : 15,
        mapTypeId : google.maps.MapTypeId.ROADMAP,
        draggableCursor: "crosshair" 
    });

    // マーカー・ライン・ポリゴン情報を保管するオブジェクト
    var measure = {
        mvcLine: new google.maps.MVCArray(),
        mvcPolygon: new google.maps.MVCArray(),
        mvcMarkers: new google.maps.MVCArray(),
        line: null,
        polygon: null
    };

    //地図にクリックイベントを設定
    google.maps.event.addListener(mapObj, "click", function(evt) {
            //地図クリック時にマーカー、ライン、ポリゴンを追加
            measureAdd(evt.latLng);
    });


    //マーカー、ライン、ポリゴンを追加する
    function measureAdd(latLng) {
        //新規マーカー作成
        var marker = new google.maps.Marker({
            map: mapObj,
            position: latLng,
            draggable: true,
            raiseOnDrag: false,
            title: "ドラッグで移動できます"
        });

        //ライン情報を追加
        measure.mvcLine.push(latLng);
        //ポリゴン情報を追加
        measure.mvcPolygon.push(latLng);
        //マーカー情報を追加
        measure.mvcMarkers.push(marker);

        //ラインの頂点の数を更新
        var latLngIndex = measure.mvcLine.getLength() - 1;

        //マーカードラッグイベント設定、ドラッグされたらライン情報・ポリゴン情報を更新する
        google.maps.event.addListener(marker, "drag", function(evt) {
                measure.mvcLine.setAt(latLngIndex, evt.latLng);
                measure.mvcPolygon.setAt(latLngIndex, evt.latLng);
        });

        //マーカードラッグ終了後イベント設定、マーカーのドラッグ・移動が終わったら距離・面積の計算を行う
        google.maps.event.addListener(marker, "dragend", function() {
            if (measure.mvcLine.getLength() > 1) {
                 measureCalc();
            }
        });

        // ラインの頂点が１以上ある場合
        if (measure.mvcLine.getLength() > 1) {
            // ラインが作成されていなければ作成する
            if (!measure.line) {
                measure.line = new google.maps.Polyline({
                    map: mapObj,
                    clickable: false,
                    strokeColor: "#FF0000",
                    strokeOpacity: 1,
                    strokeWeight: 3,
                    path:measure. mvcLine
                });
            }

            // ラインの頂点が２つ以上ある場合
            if (measure.mvcPolygon.getLength() > 2) {
                // ポリゴンが作成されていなければ作成する
                if (!measure.polygon) {
                    measure.polygon = new google.maps.Polygon({
                        clickable: false,
                        map: mapObj,
                        fillOpacity: 0.25,
                        strokeOpacity: 0,
                        paths: measure.mvcPolygon
                    });
                }
            }
        }

        // ラインの頂点の数が１以上の時は距離と面積を計算する
        if (measure.mvcLine.getLength() > 1) {
            measureCalc();
        }
    }
	
	//距離・面積の計算
    function measureCalc() {
        // geometryライブラリ使用して距離を計算する
        var length = google.maps.geometry.spherical.computeLength(measure.line.getPath());
        jQuery("#distance").text(length.toFixed(1))

        // ラインの頂点が２つ以上ある場合は面積を計算する
        if (measure.mvcPolygon.getLength() > 2) {
            var area = google.maps.geometry.spherical.computeArea(measure.polygon.getPath());
            jQuery("#area").text(area.toFixed(1));
        }
    }

    //マーカー・ライン・ポリゴンのリセット
    function measureReset() {
        // ポリゴンが作成されているならばnullをセット
        if (measure.polygon) {
            measure.polygon.setMap(null);
            measure.polygon = null;
        }
        // ラインが作成されているならばnullをセット
        if (measure.line) {
            measure.line.setMap(null);
            measure.line = null
        }

        //MVCArraysのライン・ポリゴン情報をクリア
        measure.mvcLine.clear();
        measure.mvcPolygon.clear();

        // マーカーを削除する
        measure.mvcMarkers.forEach(function(elem, index) {
            elem.setMap(null);
        });
        measure.mvcMarkers.clear();

        jQuery("#distance,#area").text(0);
    }
    
    //リセットボタンにイベントを設置
    $('#reset').click(measureReset);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

google.maps.event.addDomListener(window, "load", initialize);

function initialize() {

google.maps.visualRefresh=true;　//Google map新スタイルを使用

//Mapオブジェクトを作成

var mapDiv = document.getElementById("map_canvas");

var mapObj = new google.maps.Map(mapDiv, {

center : new google.maps.LatLng(36.322356, 139.013057),

zoom : 15,

mapTypeId : google.maps.MapTypeId.ROADMAP,

draggableCursor: "crosshair"

});

// マーカー・ライン・ポリゴン情報を保管するオブジェクト

var measure = {

mvcLine: new google.maps.MVCArray(),

mvcPolygon: new google.maps.MVCArray(),

mvcMarkers: new google.maps.MVCArray(),

line: null,

polygon: null

};

//地図にクリックイベントを設定

google.maps.event.addListener(mapObj, "click", function(evt) {

//地図クリック時にマーカー、ライン、ポリゴンを追加

measureAdd(evt.latLng);

});

//マーカー、ライン、ポリゴンを追加する

function measureAdd(latLng) {

//新規マーカー作成

var marker = new google.maps.Marker({

map: mapObj,

position: latLng,

draggable: true,

raiseOnDrag: false,

title: "ドラッグで移動できます"

});

//ライン情報を追加

measure.mvcLine.push(latLng);

//ポリゴン情報を追加

measure.mvcPolygon.push(latLng);

//マーカー情報を追加

measure.mvcMarkers.push(marker);

//ラインの頂点の数を更新

var latLngIndex = measure.mvcLine.getLength() - 1;

//マーカードラッグイベント設定、ドラッグされたらライン情報・ポリゴン情報を更新する

google.maps.event.addListener(marker, "drag", function(evt) {

measure.mvcLine.setAt(latLngIndex, evt.latLng);

measure.mvcPolygon.setAt(latLngIndex, evt.latLng);

});

//マーカードラッグ終了後イベント設定、マーカーのドラッグ・移動が終わったら距離・面積の計算を行う

google.maps.event.addListener(marker, "dragend", function() {

if (measure.mvcLine.getLength() > 1) {

measureCalc();

}

});

// ラインの頂点が１以上ある場合

if (measure.mvcLine.getLength() > 1) {

// ラインが作成されていなければ作成する

if (!measure.line) {

measure.line = new google.maps.Polyline({

map: mapObj,

clickable: false,

strokeColor: "#FF0000",

strokeOpacity: 1,

strokeWeight: 3,

path:measure. mvcLine

});

}

// ラインの頂点が２つ以上ある場合

if (measure.mvcPolygon.getLength() > 2) {

// ポリゴンが作成されていなければ作成する

if (!measure.polygon) {

measure.polygon = new google.maps.Polygon({

clickable: false,

map: mapObj,

fillOpacity: 0.25,

strokeOpacity: 0,

paths: measure.mvcPolygon

});

}

// ラインの頂点の数が１以上の時は距離と面積を計算する

if (measure.mvcLine.getLength() > 1) {

measureCalc();

}

//距離・面積の計算

function measureCalc() {

// geometryライブラリ使用して距離を計算する

var length = google.maps.geometry.spherical.computeLength(measure.line.getPath());

jQuery("#distance").text(length.toFixed(1))

// ラインの頂点が２つ以上ある場合は面積を計算する

if (measure.mvcPolygon.getLength() > 2) {

var area = google.maps.geometry.spherical.computeArea(measure.polygon.getPath());

jQuery("#area").text(area.toFixed(1));

}

//マーカー・ライン・ポリゴンのリセット

function measureReset() {

// ポリゴンが作成されているならばnullをセット

if (measure.polygon) {

measure.polygon.setMap(null);

measure.polygon = null;

}

// ラインが作成されているならばnullをセット

if (measure.line) {

measure.line.setMap(null);

measure.line = null

}

//MVCArraysのライン・ポリゴン情報をクリア

measure.mvcLine.clear();

measure.mvcPolygon.clear();

// マーカーを削除する

measure.mvcMarkers.forEach(function(elem, index) {

elem.setMap(null);

});

measure.mvcMarkers.clear();

jQuery("#distance,#area").text(0);

}

//リセットボタンにイベントを設置

$('#reset').click(measureReset);

}

サンプルコード

投稿者: shimizu