google map api for flash 写真をinfowindow上に表示させる
以前からある程度作っていたので、これくらい簡単にできると思いきや
めちゃくちゃ苦労しました・・・
どこら辺が大変だったのかというと
マーカーを載せて、マーカーをクリックしたときにinfowindowを表示させるようにするには
どうすればいいのか分かっていなかったことと
写真を載せたときにwidth heightで表示しても写真の大きさが変わってくれなかったことです。
特に大きさを変化させるのにはどうやったらいいのか見当もつかなくて
infowindowを使った写真を載せているHPをぐるぐる回りましたね･･･
やっぱり参考になったのはコードが書いてあるグーグルのリファレンスやらDemoやらのページです
とりあえずHelloWorld.asのコードを載せてみます
このアクションスクリプト以外はノータッチでコンパイルしました。
package com.google.maps.examples {
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.LatLng;
import com.google.maps.controls.*;
import com.google.maps.overlays.Marker;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.InfoWindowOptions;
import com.google.maps.MapMouseEvent;
import com.google.maps.controls.ZoomControl;
public class HelloWorld extends Map
{
public function HelloWorld()
{
super();
addEventListener(MapEvent.MAP_READY, onMapReady);
}
private function onMapReady(event:MapEvent):void
{
var zoomOptions:ZoomControlOptions = new ZoomControlOptions(
{ hasScrollTrack:true }
);
setCenter(new LatLng(35.118598,136.90484), 16, MapType.NORMAL_MAP_TYPE);
addControl( new PositionControl() );
addControl( new ZoomControl(zoomOptions) );
//kokokara tuikabun
addControl(new MapTypeControl());
enableScrollWheelZoom();
enableContinuousZoom();
var markerA:Marker = new Marker(
new LatLng(35.118598,136.90484),
new MarkerOptions({ fillRGB: 0x004000,
name: "宮の渡し公園"
}));
addOverlay(markerA);
markerA.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent):void
{
markerA.openInfoWindow(new InfoWindowOptions(
{
contentHTML:"<img width='200' height='180' src='画像のアドレス' vspace='5'>",titleHTML:"宮の渡し公園",width:210
}));
});
//kokomade
}
//onMapReadyの括弧
}
}
この状態だととても見づらいですが説明を加えてみます
kokokaraと書いてあるところまでが前回の単純な地図の拡大と地図を表示させる座標を入れただけのコードです。（実際には初めの部分のimportの部分が異なっていますが＞＜
importの部分とはMarkerやinfowindow、マップのコントロールなどを使うと付け加えなければならない部分です。
今回加えた部分が
import com.google.maps.overlays.Marker;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.InfoWindowOptions;
import com.google.maps.MapMouseEvent;
import com.google.maps.controls.ZoomControl;
のところで上2段が、マーカーを使うときに必要な物
infowindowを使うので3段目が必要で、4段目はマーカーをクリックしたときに必要な物
最後のはマウスホイールで拡大縮小を行いたかったので必要でした。
次に本題
addControl(new MapTypeControl()); enableScrollWheelZoom(); enableContinuousZoom();
これをonMapReadyの中に入れるだけでマウスホイールの拡大縮小なんかができます。
var markerA:Marker = new Marker(
new LatLng(35.118598,136.90484),
new MarkerOptions({ fillRGB: 0x004000,
name: "宮の渡し公園"
}));
addOverlay(markerA);
var markerAで名前と動作を定義しています：より後の部分はマーカーの役割をしなさいと言った感じです。
LatLngでマーカーの座標を決定しています。マーカーオプションは全部空白でも良かったかもしれません
addOverlayで実際に表示させる動作をしています※(markerA)は上で定義した物を表示させています。
markerA.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent):void
{
markerA.openInfoWindow(new InfoWindowOptions(
{
contentHTML:"<img width='200' height='180' src='' vspace='5'>",titleHTML:"",width:210
}));
});
最後にマーカーをクリックしたときにinfowndowが表示されるようにするコードです。
markerA.addEventListenerで上で定義したmarkerAのクリックの定義をします。
初めの一行はmarkerA以外はさわるところはありません、何となくクリックを特定させているなぁと言ったところです
次にmarkerA.openInfoWindow
何度も説明しましたが言い方を変えると「○.動作」
○はvarで定義した物が大抵は入ってきます。そして「.動作」を加えることで○が動作を行います。
※その他詳しく説明していない部分は分かっていないところが多いです
contentHTML:の後にHTMLでいう<body>の中身を書いていきます。書き方はホームページを記入するのとほとんど一緒ですが若干異なる部分があります。
まずは<img>タグの記述ですがsrcとwidth,heightを逆に記入すると画像の大きさが変わってくれません。
さらに通常””で囲う部分を’’にしないとエラーを起こしてコンパイルできません。
恐らくはcontentHTML:”タグやテキスト”といった外枠の””と競合しているのかと思われます。
外枠の“”の方が重要なのでそれを消すと絶対うまくいかないと思います。
titleHTML:””は見たままでinfowindowのタイトルの部分となります。
width:はなぜか幅だけが画像にあわせてくれなかったので、infowindowの幅を定義しなければなりませんでした。
ちなみにinfowindowOptionは({定義:,定義:,定義:})となっている模様です。
長くなりましたができた物を置いてみます
&flash(http://wikiwiki.jp/haruko57/?plugin=attach&pcmd=open&file=HelloWorld.swf&refer=FrontPage%2F2008-09-21,600x400);
単純ですが、苦労しました 