指定の方向へ移動

広告

ストリートビュー上では道路に沿って次の画面へ移動するための仕組みが用意さえています。

p5-1

上記の場合でいえば、中央付近から5つの方向へ向かって黄色い線が引かれ、それぞれ矢印が表示されています。この矢印をクリックすると道路に沿って次の地点へ移動します。

p5-2

p5-3

このように道路に沿って移動する仕組みをスクリプト側で行う方法を確認します。指定の方向へ移動を行うにはGStreetviewPanoramaクラスで定義されているfollowLinkメソッドを使います。 

followLink(yaw:Number)

現在のパノラマから隣接するパノラマへのリンクに従って移動します。yaw は隣
接するパノラマの方角 (ヨー) を指定します。隣接するパノラマが複数存在する
場合は、最も近いものを取ります。

1番目の引数には方向を示す数値を指定して下さい。数値は0から360の間で指定します。(北は 0 度、東は 90 度、南は 180 度、西は 270 度)。指定した数値の方向へ最も近い移動先を選択して移動します。

実際には次のように記述します。 

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.172304,136.908306), 15);

var slatlng = new GLatLng(35.658517, 139.745493);
var option = { latlng:slatlng };
var scontainer = document.getElementById("street");
var panorama = new GStreetviewPanorama(scontainer, option);

panorama.followLink(0);

上記では真北の方向に最も近い移動先へ移動します。

サンプルプログラム

では試してみます。

code5_1.js 

var map;
var panorama;

function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(35.665375,139.729593), 16);

    var street = new GStreetviewOverlay();
    map.addOverlay(street);

    var slatlng = new GLatLng(35.665375,139.729593);
    var option = { latlng:slatlng };

    var scontainer = document.getElementById("street");
    panorama = new GStreetviewPanorama(scontainer, option);

    GEvent.addListener(panorama, "initialized", moveMap);
  }
}

function move(){
  var direc = document.getElementById("direc").value;
  panorama.followLink(parseInt(direc));
}

function moveMap(loc){
  map.panTo(loc.latlng);
}

map5_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>サンプル：指定の方向へ移動</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/code5_1.js" type="text/javascript"></script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 400px; height: 300px"></div>
    <div id="street" style="width: 400px; height: 200px; margin-top:10px;"></div>

    <form>
    <p>
    方向：<input type="text" id="direc" size="5" value="10" />
    <input type="button" id="btn" value="移動" onclick="move()" />
    </p>
    </form>

  </body>
</html>

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

p5-4

現在の地点からは100度と300度の2方向へ移動可能です。では地図下のテキストボックスに300と入力して「移動」ボタンを押します。

p5-5

指定の方向へ移動しました。今回のサンプルではストリートビューで場所が移動すると、イベント処理を使って地図の表示位置も合わせて変更するようにしてあります(詳しくは次のページで解説します)。

何回か進んでいくと次の交差点に出ます。

p5-6

今度は45度の方角へ移動してみます。

p5-7

( Written by Tatsuo Ikura )