第4回「Virtual Earth」(2)

2007.08.21

園田誠（そのだまこと）

　地図というのはどうしてこうも男心をくすぐるんでしょうか。一通り知り合いの家あたりを見終わると，目に付いた道をまっすぐたどってどこまでいくのか見てみたくなります。そして突き当たると，この国道にも起点や終点があったんだなとか変なことに感動してみたり。プログラムなんかしなくてもこれはこれで楽しめるのかもしれま…いや，ちゃんと記事書きます。ごめんなさい。1965年生まれ。愛知県名古屋市出身のフリーライター。

　Virtual Earthでは，指定された地図上のポイント間で経路表示を行うことができます。A地点からB地点に行くときに，どの道をたどればいいのかという表示です。今回は，経路探索のサンプルを作ってみます。

　まず経路表示がどういうものか，実際に見てみることにします。Virtual Earth Interactive SDKのページで，サンプルとソースを確認しましょう。

　SDKのページでは，左側にあるメニューで[Get a route and directions]－[Get a route]と開いてください。

　このサンプルは，2点間でたどるべき経路情報を青い線で表示しています。カーナビの経路表示に似ていて，途中のポイントを，システム側判断でいくつか表示しているようです。この機能を使えば，経路情報付き地図を自社サイトに貼り付けて，最寄り駅から会社や店舗までの案内図を作成するといったこともできます。

経路探索をやってみよう

　では，サンプルを作ってみましょう。Virtual Earth Interactive SDKのサンプルをそのまま使って，msn2.htmlの名前で作成します（リスト1）。SDKの指定通りに，文字コードはUTF-8形式で保存する必要があります。デスクトップに保存して，ダブルクリックで動作します。前回と同様に，セキュリティ警告が出たら承認してください。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>経路サンプル</title>
    <meta http-equiv="Content-Type"
      content="text/html; charset=utf-8">
    <script src=
      "http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5">
    </script>
    <script>
      var map = null;

      function GetMap()
      {
        map = new VEMap('myMap');
        map.LoadMap();
        //経路情報を処理している部分
        map.GetRoute("Space Needle", "Microsoft");
      }   
    </script>
  </head>
  <body onload="GetMap();">
    <div id='myMap'
      style="position:relative; width:800px; height:400px;">
    </div>
  </body>
</html>

リスト1●指定した2点間の経路情報を表示するサンプル

　Virtual Earth Interactive SDKの処理では，経路を出すにはちょっと画面が狭いので，地図表示の横幅を広げています（図1）。

図1●“Space Needle”から“Microsoft”までの経路を表示した地図画面
[画像のクリックで拡大表示]

　リスト1のコメント「//経路情報を処理している部分」の下の行が経路を表示している処理です。そのほかの部分は基本的な地図表示で，前回と特に変わる部分はありません。

　map.LoadMap()で地図を表示しています。初期位置としての緯度や経度，地図のズーム倍率などの指定はありません。経路情報を出す場合は，該当経路が画面内に指定されるズーム倍率が自動で選択され，経路全体が表示地図内に収まるように座標も自動調整されます。かなりシステマチックな作りになっているようです。

　もし表示位置を指定する必要があったり，ズーム倍率もプログラム側で調整しなくてはならないとなると，経路作成は相当の労力を要します。Virtual Earthでは，面倒な計算をすべてサーバー任せにすることで，プログラムの作成が容易になっているというわけです。

　肝心の経路を求める処理部分を見てみましょう。map.GetRoute("Space Needle", "Microsoft")と書かれています。経路処理はこの1行だけです。他には何もありません。GetRouteという関数に「Space Needle」と「Microsoft」という二つの引数を指定しています。どうやら地名や社名らしいことが想像できます。

日本の地名も英語表記すればOK

　地名で指定ができるならばということで試してみました。経路処理の行を次のように書き換えます。

map.GetRoute("東京駅", "新宿駅");

　期待する結果は，東京駅から新宿駅への経路表示です。しかし，残念ながらこの処理は失敗しました（図2）。

図2●「東京駅」「新宿駅」という指定では位置を特定できないらしい

　日本語を使っているので，正しくUTF-8で保存しているかどうかが問題なのではないかと思い，確認してみましたが，文字コードの問題ではないようです。そこで，英語で表記して試してみます。

map.GetRoute("Tokyo Station", "Shinjuku Station");

　すると…，できちゃいました！（図3）。

図3●地名を英語で書いてみると，東京駅から新宿駅の経路が表示された
[画像のクリックで拡大表示]

　いくつか試してみたところ，次のようなものでも経路が出ることがわかりました。

map.GetRoute("Suwa", "Okaya");
map.GetRoute("Sagamihara", "Yokohama");

　英語で入力したとしても，残念ながらすべての日本国内の地名を網羅しているわけではなく，主要都市までしか対応していないようです。Shirakawaのように同名市区町村が複数存在する場合は，経路表示の前にどの都市の表示を希望するのかを選択するダイアログがでます（図4）。

図4●同名の地域がある場合は確認ダイアログが出る

　日本語での検索や，もっと単位の小さい町名などでの検索ができると格段に使いやすくなると思いますが，Virtual Earthはまだベータ版ですので，今後の対応に期待したいと思います。

　簡単なテストが終わったところでリファレンスを確認してみましょう。GetRouteメソッドの引数です。


VEMap.GetRoute(start, end, units, route_type, callback);

start：経路開始位置
  地名，住所（いずれも英語表記）またはVELatLongクラスで指定

end：経路終了位置
  地名，住所（いずれも英語表記）またはVELatLongクラスで指定

units：距離単位はマイルかキロメートルか
  VEDistanceUnit.Miles，またはVEDistanceUnit.Kilometersで指定
  初期値はVEDistanceUnit.Miles

route_type：最短距離で見るか最短時間で見るか
  VERouteType.Quickest，またはVERouteType.Shortestで指定

callback：コールバック関数
  処理単位ごとに決まった処理をしたい場合に，呼び出す関数名を指定

　ポイントはstartとendです。先ほど試したように地名での指定ができる他に，VELatLongクラス，つまり緯度と経度での指定ができると書いてあります。現状では，住所や地名で日本全国をカバーできていないので，例えば，地下鉄の駅から店舗までの経路を表示したいといった場合は，緯度と経度を指定する以外に方法はないということになります。