techtalk
Google ストリートビュー
AddThis Social Bookmark Button  Date:2008年08月07日  Category:雑記  Author:岡村

Googleストリートビューが、日本の都市部も対応して、
ネット上でちょっとした騒ぎになっています。

私も自分の昔住んでた場所の現在の様子を確認して、感動しました。

地域の様子を写真で確認する手段として、
さっそくmillon.jpにも組み込んでみました。

millon
まだ日本語ドキュメントはありませんが、
ストリートビューを使用するためのAPIの情報も公開されています。
http://code.google.com/intl/en/apis/maps/documentation/reference.html　

ドキュメントから、
GStreetviewDataクラスが、隣接するパノラマ画像の情報リストを持っていることがわかります。

「Array of GStreetviewLink」
Links to neighbouring panoramas, if any. (Since 2.104)

コレを利用して、
最初のポイントから隣接するポイントをたどって、
写真を表示しつづけるようなプログラムを作成しました。

概要としては、

現在位置から移動できる隣接のポイントを取得
　↓
取得したもののうち、前いたポイントではないものを選択して移動

以上を繰り返すことによって、
直線を進み、交差点ではランダムに曲がるような動作をさせています。

サンプルはこちら。

以下はソースコードです。

initPanorama(緯度,経度)でスタート、idが"pano"であるDIVに表示されます。
  1.  
  2. var lastPanoId = null;         // 最後にいた場所のPanoID
  3. var nowLatLng;
  4. var streetViewClient;
  5. var streetPanorama;
  6. var moveInterval;
  7.  
  8. function initPanorama(lat, lng){
  9.    streetViewClient = new GStreetviewClient;
  10.    streetPanorama = new GStreetviewPanorama(document.getElementById("pano"));
  11.    nowLatLng = new GLatLng(lat, lng);
  12.    streetViewClient.getNearestPanoramaLatLng(nowLatLng, function(latlng){
  13.         if(latlng == null){
  14.             document.getElementById("pano").style.display = "none";
  15.             document.getElementById("pano_desp").style.display = "none";
  16.             return;
  17.         }
  18.         nowLatLng = latlng;
  19.         streetPanorama.setLocationAndPOV(nowLatLng, {yaw: 0, pitch: 0, zoom: -1});
  20.         // 5秒後に移動
  21.         moveInterval = setInterval(toNextPanorama, 5000);
  22.    })
  23.  
  24. }
  25.  
  26. // 現在の表示位置から一番近いStreetViewDataを取得し、そこから隣接するパノラマに移動する
  27. function toNextPanorama(){
  28.    clearInterval(moveInterval);
  29.    // 現在の表示位置の緯度経度を取得
  30.    streetViewClient.getNearestPanorama(nowLatLng, function(streetData){
  31.  
  32.         var neighbourCount = streetData.links.length; // 隣接するパノラマの数
  33.  
  34.         var nextYaw; // 次に向かう方向
  35.         var nextPanoId; // 次に向かうパノラマのID
  36.         if(neighbourCount == 1){
  37.             // 隣接するパノラマが１つだった場合はそこへ移動
  38.             nextYaw = streetData.links[0].yaw;
  39.             nextPanoId = streetData.links[0].panoId;
  40.         }else{
  41.            while(true){
  42.                i = Math.floor( Math.random() * neighbourCount );
  43.                if(lastPanoId != streetData.links[i].panoId){
  44.                     nextPanoId = streetData.links[i].panoId;
  45.                     nextYaw = streetData.links[i].yaw;
  46.                     break;
  47.                }
  48.            }
  49.         }
  50.         lastPanoId = streetData.location.panoId;     // 今いた場所を覚えておく
  51.         streetViewClient.getPanoramaById( nextPanoId,
  52.                                           function(nextStreetData){
  53.                                               nowLatLng = nextStreetData.location.latlng;
  54.                                               // 目的地へGO！
  55.                                               //streetPanorama.setLocationAndPOV( nowLatLng, {yaw:nextYaw, pitch:0, zoom:-1}\
  56. );
  57.                                               streetPanorama.followLink(nextYaw);
  58.                                               //streetPanorama.setPOV({yaw:nextYaw, pitch:0, zoom:-1});
  59.                                               moveInterval = setInterval(toNextPanorama, 5000);
  60.                                           }
  61.                                          );
  62.    }
  63.    );
  64. }
  65.  
←GoogleMaps にカスタムウィンドウを表示する Topに戻る  
カテゴリー
全て
Flash
PHP
雑記