Home > WEB | javascript > ストリートビューと地図の連携

ストリートビューと地図の連携

2008-08-13 (水) 20:24
WEB | javascript
googlemaps | ストリートビュー

前回は、自動で下北をぐるぐる歩き回らせるのを作りましたが、
今回はストリートビューを自分でマウスで移動させて、地図のほうの位置を変更させるという、
まさに、本家でやれ！なものを作って見ました。
自動でウロウロに比べたら簡単。
動きは本家と変わらないですが、しいて言うならキャラクタが向き変えるところでしょうか。

前回の自動でウロウロと、今回の自分でウロウロ組み合わせると、
ストリートビュー鬼ごっこゲームができそうですね。

↓今回はストリートビューのほうをマウスで操作

ストリートビューの角度の変更イベントが yawchanged、
位置の変更イベントが initialized で得られます。
それに応じて、キャラクターの向きと、地図の位置を変更してやっています。

ソースコード全部

>>text

JAVASCRIPT:

var lastPanoId = null; // 最後にいた場所のPanoID
var nowLatLng;
var map;
var streetViewClient;
var streetPanorama;
// GoogleMapsの初期化
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);
});
GEvent.addListener(streetPanorama,
"initialized",
function(location){
panoramaInitialized(location);
});
})
}
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"/>';
}
function panoramaInitialized(location){
map.panTo(location.latlng);
}

そういえば、私事ですが、結婚パーティーではここでも書いた、
ビンゴの景品のクジ用のAirアプリを無事プロジェクターで動作させることができました。

ものを作って人に喜んでもらうのは、本当にうれしいですね。

ライブのほうも無事(?)成功しました。
レポートはバンドのホームページのほうに、書こうかなと思います。

ところで、前から開発合宿みたいなものを一度してみたかったんですが、
今度それが叶いそうです。

2泊3日で、どんなものができるのか、このBlogでもレポートしていきたいと思います。8/22~24 の予定。

Comments:0

Trackbacks:0

Trackback URL for this entry: http://parpue.net/web/249/trackback
Listed below are links to weblogs that reference: ストリートビューと地図の連携 from parpue.net

Home > WEB | javascript > ストリートビューと地図の連携

最近の記事

カテゴリ