AJAXのお勉強

Googleマップ 二点間の距離＠AJAX

二点間の距離を求めます。
GLatLngには、distanceFromメソッドがあり、距離を求められます。

二つ位置を生成します。
var point1 = GLatLng(緯度,経度);
var point2 = GLatLng(緯度,経度);

point1.distanceFrom(point2)
で二点間の距離を求めることができます。

戻り値はメートルです。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Googleマップ マップの移動</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=****" type="text/javascript"></script>
<script type="text/javascript">

//<![CDATA[

function load() {
    if (GBrowserIsCompatible()) {

        //位置を二つ作成
        var points = new Array();
        points[0] = new GLatLng(35.681099, 139.767084);
        points[1] = new GLatLng(35.69169, 139.770883);
        
        //距離を求める
        document.getElementById("distance").innerHTML = "東京駅と神田駅の距離：" + points[0].distanceFrom(points[1]) + "メートル";
        
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(points[0], 14);
        
        var marker1 = new GMarker(points[0])
        map.addOverlay(marker1);
        
        var marker2 = new GMarker(points[1])
        map.addOverlay(marker2);
        
        var polyline = new GPolyline(points,"#FF9999", 5, 0.8);
        map.addOverlay(polyline);

    }
}

//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 400px; height: 400px"></div>
    <BR>
    <div id="distance"></div>
</body>
</html>

Copyright (C) 2008 AJAXのお勉強. All Rights Reserved.