日記/管理人/2008-03-12

Last-modified: 2008-03-12 (水) 17:27:08

Google MapをFLASHで利用するPart2

昨日トライして実行に至らなかったんですが
チュートリアルのサンプルをダウンロードしてみたらなんとGmapが同梱されているではないですか

そのものではない気もしますが(一部動作しないところもありました)
ほとんどチュートリアルの説明通りに動くのでそのまま作ってみることにしました。
どのようになっているのかというと
コンポーネントでマップが提供されているので、Actionscriptを何も設定しなくても
マップ自体は置くことができます
次に、表示させたい画面を設定するところでは

gMap.setCenter({lat:35.125,lng:136.907227},16);

と記入して(実際に利用している値)lat:数値,lng:数値,の部分は緯度経度を表します
16の値は16倍で表示させるといった意味です

Actionscriptの部分をこんな感じで置けば、マップ上はまっさらですが
表示させたいマップを置くことができます

Stage.align = "TL";
Stage.scaleMode = "noScale";
gMap.addControl(gMap.GTypeControl());
gMap.addControl(gMap.GZoomControl({display:"compact"}));
gMap.addControl(gMap.GPositionControl());
gMap.setSize(Stage.width, Stage.height);
function onResize()
{
	gMap.setSize(Stage.width, Stage.height);
}
Stage.addListener(this);
gMap.setCenter({lat:35.125,lng:136.907227},16);

さらに、ポイントを置くには

var point = gMap.addPoint({lat:35.1284,lng:136.9097,fillRGB:0xFF0000, name:"Start",description:"熱田区役所"});
function eventResponder(evnt){
	// open info window
	evnt.target.openInfoWindow({title:evnt.target.name,content:evnt.target.description,contentAutoSize:true});
}
point.addEventListener("GEOMETRY_ON_RELEASE", eventResponder);

といった感じでgMap,addPointのlat:,lngは先ほど説明したままでfillRGB:の部分でポイントの色を決めています
name:でポイントのタイトルを入力して
description:で説明部分を記入しています
function eventResponder(evnt)の中身とpoint.addEventListenerの中身は共通(コンテンツやタイトルがない場合はfunction eventResponderやpoint.addEventListenerは必要ありません)で結構です

さらに、僕が作ったルートはかなりうっとうしかったところで
線の向きを変えるたびに緯度経度を入力したActionscriptが必要なので
ここでの説明は省かせてもらいます
簡単な方法としてはグーグルマップの登録ポイントを.KMLとして保存しておくと(チュートリアルを読んだだけなので違う可能性がありますが)
簡単に載せることができるかと思われます
トップページにも貼り付けてありますが
実際はこんな感じ
&flash(http://wikiwiki.jp/haruko57/?plugin=attach&pcmd=open&file=gmap.swf&refer=FrontPage%2F2008-03-30,500x800);
使ってみた感想は自作マップを作るならこれ使った方がいいといったところです