GoogleMapsAPIでマーカーをストリートビューで表示させたい

GoogleMapsAPIでマーカーを追加し移動もできるようにしましたが、
このマーカーのストリートビューを別窓で表示させる方法を教えていただけないでしょうか
マーカーは人型のアイコンではなく、追加したマーカーです
よろしくお願いします


以下、ソースです
///////////////////////////////////////////////
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(
document.getElementById("gMap"),{
zoom : 16,
center : new google.maps.LatLng(35.688272,139.696459),
mapTypeId : google.maps.MapTypeId.ROADMAP,
streetViewControl : true
}
);

var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.688272,139.696459),
map: map,
draggable : true
});

}
</script>

<style>
#gMap{
width: 900px;
height: 500px;
}

#View{
width: 900px;
height: 300px;
border: 1px solid #000; /* この枠線内にストリートビューを表示させたい */
}
</style>
</head>

<body onload="initialize()">
<div id="gMap"></div>
<div id="View"></div>
</body>

///////////////////////////////////////////////

「GoogleMapsAPIのストリートビ」の質問画像

このQ&Aに関連する最新のQ&A

A 回答 (3件)

提示されたソースコードの修正ではなく、自分で作成したものですが、


参考になりそうでしたら、ご利用ください。

尚、このページの単純コピペだと、変なところで改行されて動作不良と
なることがあるようなので、適宜修正してください。

////////// 以下ソース

<!DOCTYPE html><html><head><title>サンプル</title>
<meta http-equiv='Content-Type' content='text/html; charset=shift_jis'>
<script type='text/javascript' src='http://maps.google.com/maps/api/js?v=3.13&sensor …
<script type='text/javascript'>

var LatLng,mOptions,pOptions,map,pano;
function initialize(){

LatLng = new google.maps.LatLng(35.681382, 139.766084); //位置の初期値

mOptions = {
zoom: 16, center: LatLng, mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById('mcanvas'), mOptions);

pOptions = {
position: LatLng, pov: {heading: 0, pitch: 0, zoom: 1.34 } //方角、仰角、ズームの初期値
};

pano = new google.maps.StreetViewPanorama(document.getElementById('pcanvas'), pOptions);

marker = new google.maps.Marker({
map: map, position: LatLng, draggable: true
});

google.maps.event.addListener(marker, 'position_changed', function(){
LatLng = marker.getPosition();
pano.setPosition(LatLng);
});

}

</script></head>

<body onload='initialize()'>
<div id='mcanvas' style='width:640px; height:240px'></div>
<div id='pcanvas' style='width:640px; height:240px'></div>
</body></html>

追記:
・APIはバージョン3.1Xを使用(私は3.0のマーカーが嫌いなので)
・初期位置は東京駅ですが、ビューがないので空白になります
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます

作成していただいたソースでできました!
こんなかっこいいマーカーもあったんですね
大変勉強になりました
是非使用させていただきます!

お礼日時:2014/01/14 00:19

ANo1です。



あくまでも独自マーカーにこだわるのであれば、マップとストリートビューを連動させる際には、それぞれの移動イベントを拾って逐次他方に反映させてあげるる必要があると思われます。
また、ビューの無い地点が指定された際の処理(デフォルトの表示がどうなるのか調べていませんが)についても考慮する必要があるかも知れません。

>js初心者のためアレンジできるかわかりませんが・・・
初心者の度合いにもよりますが、多少ややこしいかも知れません。
頑張ってください。
    • good
    • 0
この回答へのお礼

度々ご回答ありがとうございます!
是非参考にさせていただきます

お礼日時:2014/01/14 00:11

ストリートビューって、使ってみたことはほとんどありませんが…



マップのデフォルトの人型を利用した方が、ビューの方向や既撮影の道路(青く表示される)などの機能がそのまま利用できるので便利ではないでしょうか?

あえて違うマーカーを利用する理由が見つからないので、人型を利用する例を
(全角空白は半角に)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" …

<style type="text/css">
#gMap{ width: 900px; height: 500px; }
#View{ width: 900px; height: 300px; border: 1px solid #000; }
</style>

<script type="text/javascript">
function initialize(){
 var latlng = new google.maps.LatLng(35.688272,139.696459);

 var map = new google.maps.Map(document.getElementById("gMap"),{
  zoom : 16,
  center : latlng,
  mapTypeId : google.maps.MapTypeId.ROADMAP,
  streetViewControl : true
 });

 var view = new google.maps.StreetViewPanorama(document.getElementById("View"),{
  position : latlng,
  pov : {heading:0, pitch:0}
 });
 map.setStreetView(view);
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>

<body>
<div id="gMap"></div>
<div id="View"></div>
</body>
</html>


どうしても別のマーカーにする場合は、適当にアレンジしてください。
google mapのapiに関しては、かなり詳しく説明されていますので、たいていの情報は以下から入手できます。
 https://developers.google.com/maps/documentation …

この回答への補足

回答ありがとうございます

人型のストリートビューとは別に、
今回はあえてマーカーからストリートビューを
表示させたくご質問させていただきました

js初心者のためアレンジできるかわかりませんが、
教えていただいたURL等を参考にしてみます!
ありがとうございました

補足日時:2014/01/10 00:29
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QGoogleマップのストリートビューの撮影で使用したカメラと車両はどんなものでしょうか?

こんにちは。

自分の家の前の道路がGoogleマップのストリートビューで見れるようになりました。

確か、以前は見られなかったと思います。
(見れる場所は、随時増えているのでしょうか。)

撮影されたのは、最近のようです。
近所の方が映っていて、その方は撮影されていることを気付かなかったようです。

Googleマップのストリートビューの撮影で使用したカメラと車両はどんなものでしょうか?

車の屋根からカメラが突き出ているような車両でしょうか。
360度撮れるカメラはどんなカメラでしょう。

それとも委託された会社が独自のものを使用しているのでしょうか。

よろしくおねがいします。

Aベストアンサー

「googleカー」で検索するといろいろ見つかりますね。ストリートビューでミラーやショーウィンドゥに写ってるのも見つかってるし、見かけた人が写真とったりしてるし。

 これなんか、分かり易く写ってる。
http://www.nurs.or.jp/~ogochan/essay/archives/1101

QGoogleストリートビューAPIでインドアビューを除外したい

GoogleストリートビューAPIを使用して、任意の座標の最寄りの道路から目的の建物を表示するプログラムを作っています。

ところが最近、都内ではインドアビューを設定しているお店などが増え、意図しないお店のインドアビューが表示されてしまうようになりました。

インドアビューを除外してストリートビューAPIを使用することはできるのでしょうか?

Aベストアンサー

ANo1です。
ちょっと時間ができたので、試してみました。

リファレンスをよく読んだら、StreetViewSourceを指定できるのは、StreetViewPanoramaではなくてStreetViewServiceのようですね。(~~;)

というわけで、ちょっとまどろっこしいですが、StreetViewServiceを利用してOUTDOOR指定で返された座標を使って表示するということをやってみました。

上段表示が、座標そのままで表示。(東京駅内)
下段が、上記の方法で読み替えた座標で表示したもの。
(方向などは直接関係ないので、デフォルトのまま)

どうやらできるようではありますが、上にも書いたように少々まわりくどいので、もっと直接的な方法があるかも知れませんね。

…というよりも、ANo1でお尋ねしたように、座標位置を路上にして指定すれば良いような気がしますが。


<以下、ご参考まで>

(インデントは、全角空白になっています)
<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>Test Sample</title>

<style type="text/css">
#pano1, #pano2 { width: 600px; height: 300px; margin-bottom: 50px;}
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>

<h3>座標のまま</h3>
<div id="pano1"></div>

<h3>OUTDOOR指定</h3>
<div id="pano2"></div>


<script type="text/javascript">
(function(){
var point = new google.maps.LatLng(35.680, 139.766);
var pano1, pano2;

var panoramaDisp = function(id, latlng){
 return new google.maps.StreetViewPanorama(
  document.getElementById(id),
  {position: latlng}
 );
}

pano1 = panoramaDisp("pano1", point);

var viewS = new google.maps.StreetViewService;
viewS.getPanorama(
 {
  location: point,
  preference: google.maps.StreetViewPreference.NEAREST,
  source: google.maps.StreetViewSource.OUTDOOR
 },
 function(data, status){
  if(status=="OK") pano2 = panoramaDisp("pano2", data.location.latLng);
 }
);
})();

</script>
</body>
</html>

ANo1です。
ちょっと時間ができたので、試してみました。

リファレンスをよく読んだら、StreetViewSourceを指定できるのは、StreetViewPanoramaではなくてStreetViewServiceのようですね。(~~;)

というわけで、ちょっとまどろっこしいですが、StreetViewServiceを利用してOUTDOOR指定で返された座標を使って表示するということをやってみました。

上段表示が、座標そのままで表示。(東京駅内)
下段が、上記の方法で読み替えた座標で表示したもの。
(方向などは直接関係ないので、デフォルトのまま)

どうや...続きを読む

Qgoogleマップのストリートビュー

androidマーケットにてgoogleマップのストリートビューを
インストールしましたが
アプリの一覧にでてこないのです・・・
なので起動もアンインストールもできない
でもandroidマーケットを見るとインストール済みと表示されてて
「開く」が灰色で選択できない状態です
これってどういう事なのでしょうか?
インストールが失敗して壊れてるという事でしょうか?
どのように回避したらいいかアドバイス願います

ちなみに機種はgaraxy s2です

Aベストアンサー

私もインストールしていますが、マイアプリでの表示のされ方は、質問者様とまったく同じです。
灰色にグレーアウトして、そこから開く事はできません。

ですが、実はこれで正しくインストールされているのです。

ストリートビューは単体のアプリではありません。
あくまでもマップのアドオンとして機能します。

使い方はマーケットでストリートビューの説明を見れば書いてあります。

●マップを開いて画面を長押し
 →コンテンツのふき出しをクリック

または

●マップで検索
→プロットされたアイコン(AとかBとかね)をクリックしてコンテンツのふき出しをクリック

後は、その場所がストリートビューが適用されている道であれば、コンテンツメニューにお馴染みペグマンの人型アイコンが表示されます。
(無い場合は右側の「その他のオプション」アイコンをクリックすると出てきます)

ペグマンアイコンをクリックすれば、ストリートビューが表示されます。

PC版と違って、マップ全体の「どの道がストリートビューが適用されているか」がわからない、直感的に使えない、と云った感じのインターフェースなのが少し残念なところです。

それと、ビュー内での移動もPC版とちょっと使い勝手が違うので注意してください。
(ペグマンアイコンをドラッグ&ドロップする事で移動します)

私もインストールしていますが、マイアプリでの表示のされ方は、質問者様とまったく同じです。
灰色にグレーアウトして、そこから開く事はできません。

ですが、実はこれで正しくインストールされているのです。

ストリートビューは単体のアプリではありません。
あくまでもマップのアドオンとして機能します。

使い方はマーケットでストリートビューの説明を見れば書いてあります。

●マップを開いて画面を長押し
 →コンテンツのふき出しをクリック

または

●マップで検索
→プロットされたアイコン(AとかB...続きを読む

QgooglemapsAPIでマーカー表示されない

googlemaps APIを使ったマッシュアップサイトを作る練習を本を見ながらやっていますが、
本のとおりプログラミングしても地図は表示されるのですがマーカーが表示されません。
(アップロードする前にfirefoxで確認)
とりあえずv2で製作しています。
マーカーを表示させる方法を教えてください。

下記がjavascriptファイルです。よろしくお願いします。




var map

window.onload = function() {
load();
}

function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("mymap"));
map.setCenter(new GLatLng(35.6829, 139.7653), 13);
}
}
function _d(id, htmlTxt) {
document.getElementById(id).innerHTML = htmlTxt;
}
function createDiv(id,left,top) {
var outDiv;
outDiv =document.createElement('div');
outDiv.id = id;
document.body.appendChild(outDiv);

var tgdStyle = document.getElementById(id).style;
tgdStyle.position = "absolute";
tgdStyle.left = left + "px";
tgdStyle.top = top + "px";
tgdStyle.background = "white";
}
function removeDiv(id) {
var outDiv = document.getElementById(id);
document.body.removeChild(outDiv);
}
function varChk(target,type) {
{
return typeof(target) == type ? true : false;
}
}
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("mymap"));
map.setCenter(new GLatLng(35.6829, 139.7653), 5);
map.addControl(new GScaleControl());
map.addControl(new GLargeMapControl());
map.addControl(new GOverviewMapControl(new GSize(128,128)));
}
}
function createGMarker(title, html, lat, lng) {
var infoObj = new Object();
infoObj.title = title;
var gpObj = new GLatLng(lat, lng);
var marker = new GMarker(gpObj, infoObj);
map.addOverlay(marker);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
}

googlemaps APIを使ったマッシュアップサイトを作る練習を本を見ながらやっていますが、
本のとおりプログラミングしても地図は表示されるのですがマーカーが表示されません。
(アップロードする前にfirefoxで確認)
とりあえずv2で製作しています。
マーカーを表示させる方法を教えてください。

下記がjavascriptファイルです。よろしくお願いします。




var map

window.onload = function() {
load();
}

function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById(...続きを読む

Aベストアンサー

の部分を変えればいいのでしょうか?

=>その関数の内容はあってると思います。
もしかして、マーカーが表示されないのは、その関数を呼び出して無い
だけだったりして、

function load() {
の最後
map.addControl(new GOverviewMapControl(new GSize(128,128)));
の直後に、
createGMarker("aaaa","hogehoge",35.6829, 139.7653);
と書いてみて!

Qgoogleマップのストリートビュー表示における拡大縮小について

ストリートビュー表示の際に、右画面下部の+-のボタン、またはマウスのスクロールボタンで拡大縮小ができるわけですが、細かい縮尺で微調整できればと考えているのですが、その方法がわかりません。
おわかりの方、ご教授お願い致します。

Aベストアンサー

#1です。

>写真部分が反映されないようです。

・タブブラウザの場合、タブ毎に拡大・縮小が必要です。

 同一Tab内の場合は、拡大・縮小率は維持されます。

QG Maps APIで同時にストリートビューは?

Google Maps JavaScript API V3 を使ってページを作っています。
http://www.withmama.info/s_map/hatena.php 開いていただくと分かるのですが、左側にロードマップ右側にストリートビューを、「ページを開くと同時に表示」させるのが目的です。

Google では、
http://code.google.com/intl/ja/apis/maps/documentation/javascript/examples/streetview-simple.html というサンプルがあります(説明ページは、
http://code.google.com/intl/ja/apis/maps/documentation/javascript/services.html#StreetView にある「ストリートビューの場所と視点(POV)」の部分)。

上記のサンプルと説明ページを基に、いろいろやってみたのですが、右側のストリートビューの部分がページを開いた段階では、表示されません。左側のロードマップの人形をロードマップに載せると表示が開始されるのですが・・・。

どなたか該当ページのソースをご高覧の上で、ご教示いただけませんか?

Google Maps JavaScript API V3 を使ってページを作っています。
http://www.withmama.info/s_map/hatena.php 開いていただくと分かるのですが、左側にロードマップ右側にストリートビューを、「ページを開くと同時に表示」させるのが目的です。

Google では、
http://code.google.com/intl/ja/apis/maps/documentation/javascript/examples/streetview-simple.html というサンプルがあります(説明ページは、
http://code.google.com/intl/ja/apis/maps/documentation/javascript/services.html#StreetView ...続きを読む

Aベストアンサー

単純に表示したい場所にストリートビューの画像が無いだけですよ。
なので、ストリートビューの画像がある他の緯度経度にすれば表示されます。
都庁の緯度経度になっていますがもともとストリートビューは道路対応ですから。

ちなみにgetPanoramaByLocationを使用すると一番近い位置のストリートビューを表示する事も出来ます。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function init() {
var mapdiv = document.getElementById('map_canvas');

var lat = 35.6894875;
var lng = 139.6917064;

var zoom = 16;
var latlng = new google.maps.LatLng(lat,lng);
var myOptions = {
zoom: zoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map( mapdiv, myOptions );
var panoramaOptions = {
 position: latlng,
 pov: {
  heading: 180,
  pitch: 10,
  zoom: 1
 }
};
var panorama = new google.maps.StreetViewPanorama( document.getElementById("pano"), panoramaOptions );
map.setStreetView( panorama );

var range = 200; // 200m範囲
var client = new google.maps.StreetViewService();
client.getPanoramaByLocation(latlng, range, function(result, status) {
if (status == google.maps.StreetViewStatus.OK) {
var location = result.location;
nearestLatLng = location.latLng;
panorama.setPosition(nearestLatLng);
}
});

}

</script>
</head>
<body onload="init()">
<div id="map_canvas" style="width: 400px; height: 300px;"></div>
<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
</body>
</html>

単純に表示したい場所にストリートビューの画像が無いだけですよ。
なので、ストリートビューの画像がある他の緯度経度にすれば表示されます。
都庁の緯度経度になっていますがもともとストリートビューは道路対応ですから。

ちなみにgetPanoramaByLocationを使用すると一番近い位置のストリートビューを表示する事も出来ます。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" sr...続きを読む

Qgoogleマップ ストリートビュー優先

表題通りです。グーグルマップを観ていると都心部を外れたり、逆に駅前等では優先的に写真が出て来る場合が有ります。滅多に見ないので出来ればストリートビューを優先的(左部分)に出したいのですが、そういう設定は可能でしょうか?

お知恵拝借。

Aベストアンサー

no1です。
こちらの画像を参考にしてください。

QGoogleMapAPI V3 にて、ストリートビューが表示されない場

GoogleMapAPI V3 にて、ストリートビューが表示されない場合があります。

こちらの、

http://oshiete.goo.ne.jp/qa/6250162.html

マップの表示がずれてしまう現象は親切な回答者様によって解決出来たのですが、
同時に同じ画面にストリートビューも表示させようとしたところ、
やはり、ストリートビューでも同現象が発生してしまうようです。

イベントリスナで、visible_changed や initialized などを使ってみたのですが、
やはりうまくいきませんでした。。

map と streetview のイベントを両方取得してからマップ表示部分を隠すようにするには、
どのような方法がスマートでしょうか。

どなたかご教授頂けると助かります。

Aベストアンサー

No2、No3です。

>Google Map の既知の問題で、display: none; のままで出力すると、
>マップがズレるという現象が発生しているので
はい。

それなので、display:noneを使用せず、かつ、mapやビューのload完了を感知しなくてもよい方法のアイデアとして、他の表示による方法や重なった下に表示する方法などを(それでう、まく行くのかはわかりませんが)提示してみた次第ですが・・・? (どうも、意味が通じていないような気がします)

QGoogleマップの ストリートビュー写真を・・・

 Googleマップを開いて 右端のタブを開くと「写真」という項目があります
 これをクリックすると 地図上にその場所の写真が見られます。
 この写真を Macに 保存する方法は ないでしょうか?

友人に送るメールに 添付したいのですが・・・

Aベストアンサー

スクリーンショットを撮って送られたらどうですか。
スクリーンショットを撮るアプリもありますが、
キーボード操作だけで撮れますよ。

Command(⌘)キー+Shiftキー+4で
マウスで選択範囲出来ますので左上から右下に
ドラッグすれば撮れます。
Command(⌘)キー+Shiftキー+3で
デスクトップ画面全体が撮れます。
撮れた画像はデスクトップにありますので、
これをメールに添付すればいいと思います。
保存方法はpngになりますが、pngが対応していなければ
プレビューでjpegに変換できます。

スクリーンショットを撮るアプリとしては
SimpleCapが便利です。無料です。
(私もよく使っています。)
http://xcatsan.com/simplecap/
メニューバー常駐アプリで、全体、選択範囲などで
撮ることが出来ます。撮れたファイルは
書類フォルダにできる「SimpleCap Images」に
保存されます。

いろいろ書き込みなどをしたい場合は
Skitchが便利です。
スクリーンショットした後、文字入れ矢印入れなどが
出来ます。MacAppStoreでDownload出来ます。無料です。
https://itunes.apple.com/jp/app/skitch-sunappushotto-memo/id425955336?mt=12

スクリーンショットを撮って送られたらどうですか。
スクリーンショットを撮るアプリもありますが、
キーボード操作だけで撮れますよ。

Command(⌘)キー+Shiftキー+4で
マウスで選択範囲出来ますので左上から右下に
ドラッグすれば撮れます。
Command(⌘)キー+Shiftキー+3で
デスクトップ画面全体が撮れます。
撮れた画像はデスクトップにありますので、
これをメールに添付すればいいと思います。
保存方法はpngになりますが、pngが対応していなければ
プレビューでjpegに変換できます。

スクリーンショ...続きを読む

Qストリートビューの実装方法と、アマゾンのトップページにあるリング状の選択ボックスの実装方法について

いつもお世話になっています。
過去ログをあさってみたのですが見つけられなかったので質問します。

二点あります。

1.googleストリートビューのような、360度回転できる機能はどのライブラリを用いて実装されているのでしょうか?複数の写真を撮り、Ajaxで読み込み表示しているのだろう、ということはわかるのですが、写真と写真のつなぎ目がないし、単に写真をつないだだけではなくて、写真画像を変形させてつないでいるようにも見えます(いろいろ調べてみると、この機能自体はずいぶん昔からあったようですね。ホテルの内装とかを見やすくするために導入されていたりしたようです)。

2.アマゾンのトップページをなんどかリロードすると、奥行きのあるドーナツ状に商品画像が並んでいて、それを回転させることができます。
これはどのライブラリで実現しているのでしょうか?
ソースを見ると、該当する場所は
<div class="asinTextBlock">
<p class="seeMore">
<span class="carat">
のようになっている?ようなのですが、追いきれません。。

まだまだ未熟なのですが、志を高く勉強して行きたいので、どのライブラリで実現できるのか、またはライブラリなしで可能なのか、アマゾンオリジナルのライブラリを使用しているのか、、教えてください。

よろしくお願いいたします。

いつもお世話になっています。
過去ログをあさってみたのですが見つけられなかったので質問します。

二点あります。

1.googleストリートビューのような、360度回転できる機能はどのライブラリを用いて実装されているのでしょうか?複数の写真を撮り、Ajaxで読み込み表示しているのだろう、ということはわかるのですが、写真と写真のつなぎ目がないし、単に写真をつないだだけではなくて、写真画像を変形させてつないでいるようにも見えます(いろいろ調べてみると、この機能自体はずいぶん昔からあったよう...続きを読む

Aベストアンサー

ちょっといじっているうちに、はまってきた!
<html>
<head>
<style>
</style>
<script>
var x=[],y=[],b=[],o=[],n=[];
var sp=1;
setInterval(c,50);
window.onload=function(){
for(i=0;i<=360;i++){
zx=Math.sin(i*3.14159/180)*300;
zz=Math.cos(i*3.14159/180)*300;
zy=-150;
zk=(1000-zz)/800;
x[i]=251-zx/zk;
y[i]=-zy/zk-80;
b[i]=((700+zz)/1000)*120|0;
}
o=document.getElementById('a').getElementsByTagName('img');
p=(360/o.length)|0;
for(var i=0,m=o.length;i<m;i++){
o[i].style.position='absolute';
o[i].style.top=y[p*i];
o[i].style.left=x[p*i];
n[i]=p*i;
}
}

function c(){
for(i=0;i<o.length;i++){
o[i].style.left=x[n[i]];
o[i].style.top =y[n[i]];
o[i].style.width =b[n[i]];
o[i].style.height=b[n[i]];
o[i].style.zIndex=b[n[i]];
n[i]=(sp+n[i])%360;
}
}

</script>
</head>
<body>
<div id="a" style="width:600px;height:230px;border:1px #080 solid;position:absolute;top:50px;">
<input type="button" value="回転" onClick="sp=1;">
<input type="button" value="停止" onClick="sp=0;">
<img src="./img/0.gif" width=120" height="120" alt="ぐ~ぐるに!" onClick="location.href='http://www.google.co.jp/webhp?complete=1&hl=ja'">
<img src="./img/1.gif" width=120" height="120" alt="2">
<img src="./img/2.gif" width=120" height="120" alt="3">
<img src="./img/3.gif" width=120" height="120" alt="4">
<img src="./img/4.gif" width=120" height="120" alt="5">
<img src="./img/5.gif" width=120" height="120" alt="6">
<img src="./img/6.gif" width=120" height="120" alt="7">
<img src="./img/7.gif" width=120" height="120" alt="8">
<img src="./img/8.gif" width=120" height="120" alt="9">
<img src="./img/9.gif" width=120" height="120" alt="10">
</div>
</body>
</html>

ちょっといじっているうちに、はまってきた!
<html>
<head>
<style>
</style>
<script>
var x=[],y=[],b=[],o=[],n=[];
var sp=1;
setInterval(c,50);
window.onload=function(){
for(i=0;i<=360;i++){
zx=Math.sin(i*3.14159/180)*300;
zz=Math.cos(i*3.14159/180)*300;
zy=-150;
zk=(1000-zz)/800;
x[i]=251-zx/zk;
y[i]=-zy/zk-80;
b[i]=((700+zz)/1000)*120|0;
}
o=document.getElementById('a').getElementsByTagName('img');
p=(360/o.length)|0;
for(var i=0,m=o.length;i<m;i++){
...続きを読む


人気Q&Aランキング