2013/12/24

2点間の距離を求める(球面考慮)

確認 Google Maps API v3、JavaScript1.7

サンプルコード

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>tester</title>
	<!--「libraries=geometry」を読み込むこと-->
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry&sensor=false&region=jp" charset="UTF-8"></script>
	
	<style type="text/css">
	#map{
		width:1000px;
		height:500px;
		position:absolute;
		top:50%;
		left:50%;
		margin:-250px 0 0 -500px;
	}
	#info{
		width:400px;
		position:absolute;
		top:50%;
		left:50%;
		padding:10px;
		background:#fff;
		border:2px solid #111;
	}
	</style>
</head>
<body>
<div id="map">
</div>

<div id="info">
	地図上をクリックすると、クリックした所にマーカーが設置されて、スカイツリーまでの距離が表示されるよ<hr />
	距離:<span id="kyori"></span>
</div>

<script type="text/javascript">

//座標
var latlng = new google.maps.LatLng(35.710033, 139.810716);

//地図のオプション
var opts = {
	zoom:16,
	mapTypeId:google.maps.MapTypeId.ROADMAP,
	center:latlng
};

//#mapにグーグルマップをレンダリング
var map = new google.maps.Map(document.getElementById("map"), opts);

//マーカー1設置
var marker1 = new google.maps.Marker({
		position:latlng,
		draggable:false,
		map:map
});

//マーカー2を変数だけ用意しとく
var marker2 = new google.maps.Marker({});

//地図上をクリックした際の挙動を設定
google.maps.event.addListener(map, "click", function(e) {
	
	//マーカー2を設置
	marker2.setPosition(e.latLng);
	marker2.setMap(map);
	
	//距離求めて表示
	var from = marker1.getPosition();//スタート
	var to = marker2.getPosition();	//ゴール
	
	//距離をメートル単位で計算
	var kyori = google.maps.geometry.spherical.computeDistanceBetween(from, to);
	
	//距離を書き込み(小数点3桁まで)
	document.getElementById("kyori").textContent = kyori.toFixed(3) + 'めーとる';
});
</script>
</body>
</html>

Google Maps APIを読み込む際にgeometryライブラリを読み込むようにする。

距離は地球の球面を考慮した距離で返してくれる。

動作サンプル

568 views