Google Maps(グーグルマップ)で距離を計測する方法
今回もGeometryライブラリを使います。今回は、ポリラインで描画した線の距離を計測してみます。
なお、Google Maps関連の記事についてはこちらにまとめてありますので、ご覧ください。
Contents
Google Maps(グーグルマップ)で距離を計測する方法
サンプル
マップを複数回、クリックし、PolyLineを描画してください
距離(m) |
---|
HTMLコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Sample Map</title>
<script defer
src="https://maps.googleapis.com/maps/api/js?key=(APIキー)&callback=initMap&libraries=geometry" >
</script>
<style type="text/css">
#map_canvas {
width: 100%;
height:90%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
var map;
var clickedLines;
var marker;
function initMap() {
var myLatlng = new google.maps.LatLng(35.68517826190777,139.7528236934712);
var mapOptions = {
zoom: 15,
center: myLatlng
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
clickedLines = new google.maps.Polyline({
geodesic: true,
strokeColor: "#3333FF",
strokeOpacity: 1.0,
strokeWeight: 3
});
// マップにクリックイベントを設定
google.maps.event.addListener(map, 'click', function(event) {
// クリック時の位置を渡す
drawOneLine(event.latLng);
});
}
function drawOneLine(latLng) {
var path = clickedLines.getPath();
if ( path.length == 0 ) {
createMarker(latLng);
}
path.push(latLng);
var distance = google.maps.geometry.spherical.computeLength(path);
document.getElementById('distance').innerHTML = distance;
clickedLines.setMap(map);
}
function createMarker(latLng) {
marker = new google.maps.Marker({
position: latLng,
map: map,
title: '最初の位置'
});
}
function deleteAllLines() {
var path = clickedLines.getPath();
if ( path != undefined ) {
if ( path.length >= 0 ){
do {
if ( path.length == 0 ) break;
path.pop();
} while(1);
}
}
if ( marker != undefined ) {
marker.setMap(null);
}
if ( clickedLines != undefined ) {
clickedLines.setMap(null);
}
document.getElementById('distance').innerHTML = '';
}
</script>
</head>
<body>
<div id="map_canvas"></div>
<br />
<input type='button' value="すべての線を消す" onclick="deleteAllLines();" /><br />
<table><tr><th>距離(m)</th><td><span id="distance"></span></td></tr></table>
</body>
</html>
デモ
複数地点の距離を測定する
複数地点間の距離を測定するには「computeLength」を利用します。
パラメータ
引数 | 値 |
第1引数 | 計測したい地点間の位置情報を保持した緯度/経度型の配列 |
第2引数 | 半径(任意) デフォルトは地球の半径。基本指定しなくていいと思います。 |
戻り値
地点間の総距離、単位はメートルです。
ご参考
関連ページ