Home > WEB | javascript | デザイン > Googleストリートビューでもっと下北をウロウロさせる！

Googleストリートビューでもっと下北をウロウロさせる！

前作ったやつを、もうちょっと作りこみ。
曲がるときもっとスムーズに曲がってくれるようにして、歩くスピードをアップ。

ちょっとコレで、ゲームなぞ作ってみようかなーとか。

FlashPlayer9必須みたいです。
環境によってはすごい重いかもしれません。

↓実行サンプルとソース

曲がるときのイージングをJavaScriptのタイマーで強引にやって、
もっとさくさく歩くようにしました。

setInterval で角度をちょっとずつ動かしています。

>>text

JAVASCRIPT:

// onEnterFrame的になめらかに曲がる
function yawPan(){
var pov = streetPanorama.getPOV();
if(Math.abs( nowYaw - nextYaw ) <5 ){
clearInterval(yawInterval);
moveNextPanorama();
}else{
nowYaw += (nextYaw - nowYaw) * 0.2;
pov.yaw = nowYaw;
streetPanorama.setPOV(pov);
}
}

たまに隣のポジションの緯度経度の取得に失敗することがあるようですが、
基本的には、ほっとくとどこまでも歩いていきます。

緯度経度取得に頼らないで、panoIDで隣を取得していくように変えようかしら。

↓以下ソース全部

>>text

JAVASCRIPT:

var lastPanoId = null; // 最後にいた場所のPanoID
var nowLatLng;
var map;
var streetViewClient;
var streetPanorama;
var nextYaw; // 次に向かう方向
var nowYaw;
var moveInterval; // 移動のインターバル用
var yawInterval; // 向きを変えてから移動するため
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, 2000);
})
}
function changeYaw(yaw){
var gifFile;
if( yaw> 360 ) yaw -= 360;
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 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;
var pov = streetPanorama.getPOV();
nowYaw = pov.yaw;
if(nowYaw> 360) nowYaw -= 360;
if(Math.abs(nowYaw - nextYaw)> 180){
if(nowYaw> nextYaw) nextYaw += 360;
else nowYaw += 360;
}
yawInterval = setInterval(yawPan, 100);
}
);
}
);
}
// onEnterFrame的になめらかに曲がる
function yawPan(){
var pov = streetPanorama.getPOV();
if(Math.abs( nowYaw - nextYaw ) <5 ){
clearInterval(yawInterval);
moveNextPanorama();
}else{
nowYaw += (nextYaw - nowYaw) * 0.2;
pov.yaw = nowYaw;
streetPanorama.setPOV(pov);
}
}
function moveNextPanorama(){
clearInterval(yawInterval);
// さらに次のポイントへ移動へ
map.panTo(nowLatLng);
// 移動
　　changeYaw(nextYaw);
streetPanorama.followLink(nextYaw);
moveInterval = setInterval(toNextPanorama, 1500);
}