全ルートの合計距離と合計時間を取得

広告

ここではルート検索を行った時の、全ルートの合計距離や合計時間を取得する方法を確認します。

GDirectionsクラスのgetDistanceメソッドを使うことで全てのルートの合計距離を取得することができます。 

getDistance() 

(すべての経路を通じて) ルート リクエストの合計距離を示すオブジェクト リ
テラルを返します。オブジェクトには次の 2 つのフィールドが含まれます。
「meters」と呼ばれる数字は、距離の数値を示します（メートル単位）。
「html」と呼ばれる文字列には、このルートセットの出発国で一般的に使用さ
れる単位に変更された距離の文字列表現が含まれています。

戻り値：
  	Object

例えば次のように記述します。 

var directions = new GDirections(map, document.getElementById("route"));

var obj = directions.getDistance();

取得したオブジェクトには2つのプロパティが含まれます。metersプロパティにはメートル単位での距離の数値が格納されています。またhtmlプロパティには利用している国で一般的に使われる距離の単位を使って距離を表した文字列が格納されています。

またGDirectionsクラスのgetDurationメソッドを使うことで全てのルートの合計時間を取得することができます。 

getDuration() 

すべての経路を通じて、ルート リクエストの合計時間を示すオブジェクト リテ
ラルを返します。オブジェクトには次の 2 つのフィールドが含まれます。
「seconds」と呼ばれる数字は、時間の数値を示します（秒単位）。「html」と
呼ばれる文字列には、地域に合わせて変更された時間の文字列表現が含まれて
います。

戻り値：
  Object

例えば次のように記述します。 

var directions = new GDirections(map, document.getElementById("route"));

var obj = directions.getDuration();

取得したオブジェクトには2つのプロパティが含まれます。secondsプロパティには秒単位での時間の数値が格納されています。またhtmlプロパティには利用している国で一般的に使われる時間の単位を使って時間を表した文字列が格納されています。

また距離及び時間に関する要約を取得するにはGDirectionsクラスのgetSummaryHtmlメソッドを使います。 

getSummaryHtml() 

このルート リクエスト全体の時間と距離の要約を含む HTML スニペットを返し
ます。この要約は、関連する地図や DIV 要素なしに構築された GDirections オ
ブジェクトに返される唯一の情報であることに注意してください。 

戻り値：
  String

例えば次のように記述します。 

var directions = new GDirections(map, document.getElementById("route"));

var html = directions.getSummaryHtml();

getSummaryHtmlメソッドは距離と時間に関するHTML文が含まれる文字列を返します。この文字列はgetDistanceメソッドが返すオブジェクトのhtmlプロパティの値とgetDurationメソッドが返すオブジェクトのhtmlプロパティの値を組み合わせたものと考えて下さい。

サンプルプログラム

では簡単なサンプルで試してみます。

code9_1.js 

var map;
var directions;

function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(35.16809,136.911621), 13);

    directions = new GDirections(map, document.getElementById("route"));
    GEvent.addListener(directions, "load", onGDirectionsLoad);
  }
}

function dispRoute() {
  var from = document.getElementById("from").value;
  var step = document.getElementById("step").value;
  var to = document.getElementById("to").value;

  directions.clear();

  var pointArray = [from,step,to];
  directions.loadFromWaypoints(pointArray, {locale: "ja_JP"});
}

function onGDirectionsLoad(){ 
  var od = directions.getDistance();
  var ot = directions.getDuration();

  document.getElementById("iddistance").innerHTML = od.meters + "m, " + od.html;
  document.getElementById("idtime").innerHTML = ot.seconds + "秒, " + ot.html;
}

map9_1.html 

<!DOCTYPE html "-//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>サンプル：イベント(load, addoverlay, error)の利用</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=(key)&sensor=false"
            type="text/javascript" charset="utf-8"></script>
    <script src="./js/code9_1.js" type="text/javascript"></script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <form>
    <input type="text" size="20" id="from" value="名古屋駅" />
    --><input type="text" size="20" id="step" value="名古屋城" />
    --><input type="text" size="20" id="to" value="熱田神宮" />
    <input type="button" id="btn1" value="ルート案内" onclick="dispRoute()" />
    </form>

    <div id="map_canvas" style="width: 500px; height: 300px"></div>
    <div id="route" style="width: 500px; height: 200px;overflow: scroll"></div>

    <p>
    距離：<span id="iddistance">(計測前)</span>、時間：<span id="idtime">(計測前)</span>
    </p>

  </body>
</html>

ではブラウザで上記のURLを見てみます。

p9-1

「ルート案内」ボタンを押して下さい。全ルートの合計距離と合計時間を画面下部に表示します。

p9-2

( Written by Tatsuo Ikura )