Home > WEB | javascript | デザイン > Googleストリートビューで勝手に下北沢周辺を散歩するやつ作ってみた

Googleストリートビューで勝手に下北沢周辺を散歩するやつ作ってみた

Googleストリートビュー、日本地域も対応して、にぎやかな事になってますね。
自分の住んでるところとか、なつかしのあの場所とか見ると本当におもしろい！

周囲を360度パノラマで見ることができることにもびっくりです。

というわけで、さっそくGoogleMapsと、このストリートビューを使って、
下北界隈を勝手に散歩するようなものを作ってみた。

↓以下続き

画像は、マウスドラッグやアイコンクリックで回転することができます。
キャラクタが向いている方向が、表示されている画像の方向です。
移動については制御不能です。勝手に散歩し続けます。

まだリファレンスの日本語化ができていないようなので、
→http://code.google.com/intl/en/apis/maps/documentation/reference.html　
を読みながら作ってみました。

独特な関数が多かったですが、作ってて面白かったです。

今回目をつけたのが、GStreetviewDataクラスのlinkパラメータ。
「Array of GStreetviewLink」
Links to neighbouring panoramas, if any. (Since 2.104)

とあり、お隣のパノラマ画像がある位置の情報が取れるようです。

あとは迷路プログラムのような感じで作り上げました。

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

コレを繰り返すことによって、
直線を進み、交差点ではランダムに曲がります。

以下ソースコード全文です。initMap(緯度、経度)でお散歩スタートです。

>>text

JAVASCRIPT:

var lastPanoId = null; // 最後にいた場所のPanoID
var nowLatLng;
var map;
var streetViewClient;
var streetPanorama;
var moveInterval;
function initMap(lat, lng){
map = new GMap2(document.getElementById("map"));
map.disableDragging();
var ctrlObj = new GMapTypeControl();
var pos = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(5, 15));
map.addControl(ctrlObj, pos);
map.setCenter(new GLatLng(lat, lng), 18);
initPanorama(lat, lng);
}
function initPanorama(lat, lng){
streetViewClient = new GStreetviewClient;
streetPanorama = new GStreetviewPanorama(document.getElementById("pano"));
nowLatLng = new GLatLng(lat, lng);
streetViewClient.getNearestPanoramaLatLng(nowLatLng, function(latlng){
if(latlng == null){
document.getElementById("pano").style.display = "none";
return;
}
nowLatLng = latlng;
streetPanorama.setLocationAndPOV(nowLatLng, {yaw: 180, pitch: 0, zoom: -1});
GEvent.addListener(streetPanorama,
"yawchanged",
function(yaw){
changeYaw(yaw);
});
// 3秒後に移動
moveInterval = setInterval(toNextPanorama, 3000);
})
}
function changeYaw(yaw){
var gifFile;
if( yaw>= 315 || yaw <45 ) gifFile = "/common/image/ue.gif";
else if( yaw>= 45 && yaw <135 ) gifFile = "/common/image/migi.gif";
else if( yaw>= 135 && yaw <225 ) gifFile = "/common/image/shita.gif";
else if( yaw>= 225 || yaw <315 ) gifFile = "/common/image/hidari.gif";
document.getElementById("girl").innerHTML = '<img src="'+ gifFile +'" alt="gial"/>';
}
// 現在の表示位置から一番近いStreetViewDataを取得し、そこから隣接するパノラマに移動する
function toNextPanorama(){
clearInterval(moveInterval);
// 現在の表示位置の緯度経度を取得
streetViewClient.getNearestPanorama(nowLatLng, function(streetData){
var neighbourCount = streetData.links.length; // 隣接するパノラマの数
var nextYaw; // 次に向かう方向
var nextPanoId; // 次に向かうパノラマのID
if(neighbourCount == 1){
// 隣接するパノラマが１つだった場合はそこへ移動
nextYaw = streetData.links[0].yaw;
nextPanoId = streetData.links[0].panoId;
}else{
while(1){
i = Math.floor( Math.random() * neighbourCount );
if(lastPanoId != streetData.links[i].panoId){
nextPanoId = streetData.links[i].panoId;
nextYaw = streetData.links[i].yaw;
break;
}
}
}
lastPanoId = streetData.location.panoId; // 今いた場所を覚えておく
streetViewClient.getPanoramaById( nextPanoId,
function(nextStreetData){
nowLatLng = nextStreetData.location.latlng;
// 目的地へGO！
//streetPanorama.setLocationAndPOV( nowLatLng, {yaw:nextYaw, pitch:0, zoom:-1});
streetPanorama.followLink(nextYaw);
map.panTo(nowLatLng);
//streetPanorama.setPOV({yaw:nextYaw, pitch:0, zoom:-1});
moveInterval = setInterval(toNextPanorama, 3000);
}
);
}
);
}

ちなみにコレを応用したものを millon でも利用してみました。

Comments:0

Trackbacks:1

Trackback URL for this entry: http://parpue.net/web/196/trackback
Listed below are links to weblogs that reference: Googleストリートビューで勝手に下北沢周辺を散歩するやつ作ってみた from parpue.net

pingback from parpue.net - Googleストリートビューで下北をウロウロうろうろさせる！ 08-08-07 (木) 17:59: [...] 前作ったやつを、もうちょっと作りこみ。曲がるときもっとスムーズに曲がってくれるようにして、歩くスピードをアップ。 [...]

Home > WEB | javascript | デザイン > Googleストリートビューで勝手に下北沢周辺を散歩するやつ作ってみた

最近の記事

カテゴリ