2009年01月18日
【介紹】在Flash中使用Google Maps
Google於2008年釋出了Google Maps API for Flash,5月時還只支援Flex,現在已經可以在Flash CS3中編譯,這麼棒的工具當然要用用看~
要在Flash中加入Google Map很簡單,只需要以下幾個步驟:
- 註冊一組API Key,基本上算不上什麼註冊動作,只是產生一組字串供使用而已。一個步驟就解決。

- 下載SDK並解壓縮 (同時包含Flex和CS3)
- 將檔案裡lib/資料夾下的swc檔放到Windows裡的預設路徑:C:\Program Files\Adobe\Adobe Flash CS3\{language}\Configuration\Components\Google\,{language}可能是en或其它語言,Google\要自己建立。 (在本文中版本是1.8,所以檔名是map_1_8c.swc,給Flex用的檔名則會包含flex)
- 打開Flash CS3,工具列中的視窗(window)-組件(Components),將GoogleMapsLibrary拖到元件庫(Library)裡,注意目前只支援AS 3.0的檔案。

- 雖然做成了組件,事實上還是得動態產生,接下來只要輸入程式碼就OK囉~
※ 參考自官網的原文
簡易的程式碼示範:
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.LatLng;
import com.google.maps.MapType;
var map:Map = new Map();
map.key = "{你的API Key}";
map.setSize(new Point(stage.stageWidth, stage.stageHeight));
map.addEventListener(MapEvent.MAP_READY, onMapReady);
this.addChild(map);
function onMapReady(event:Event):void {
map.setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);
}
原始檔下載,{你的API Key}字串要換成第一個步驟裡取得的API Key。目前Google網頁上的程式碼有打錯,setSize那行少了個右括弧。
函式說明:
setCenter()函式用來設定地圖中央點,LatLng內的值是經緯度,14是zoom的程度
想取得經緯度只要到Google地圖瀏覽,右上角點「連結」,參數&ll=後就是座標了。
參考:Google Maps API document
http://code.google.com/intl/zh-HK/apis/maps/documentation/flash/reference.html
// 這裡是要import的部份 import com.google.maps.controls.ZoomControl; import com.google.maps.controls.PositionControl; import com.google.maps.controls.MapTypeControl; // 下面才是要放在onMapReady函式裡 map.addControl(new ZoomControl()); map.addControl(new PositionControl()); map.addControl(new MapTypeControl());示範結果:
注意,Google Maps API for Flash需搭配網路才能使用。
引用URL
http://cgi.blog.roodo.com/trackback/8116497
引用列表:
原文引用自此
噗浪Plurk熱門話題排行榜 - PlurkTop【PlurkTop】
at 2009年10月8日 18:43
謝謝你的教學,終於弄懂了
但是想請教一下
http://specials.washingtonpost.com/timespace/world/
我要做類似這個google map當作學校作業
不知道要怎麼做才能把照片(多張)
和時間軸的加上去
也是要用flash做嗎?或是用其他方式
不知道你是否可以給一個方向
謝謝
但是想請教一下
http://specials.washingtonpost.com/timespace/world/
我要做類似這個google map當作學校作業
不知道要怎麼做才能把照片(多張)
和時間軸的加上去
也是要用flash做嗎?或是用其他方式
不知道你是否可以給一個方向
謝謝
Posted by 小銘
at 2009年04月29日 22:09
你可以看看 http://code.google.com/intl/zh-HK/apis/maps/documentation/flash/demogallery.html 網頁裡範例,找有關InfoWindow的部份,每個都有附上原始碼,關鍵字:Marker、InfoWindowMapComponent、InfoWindowOptions。
Posted by 熊
at 2009年04月30日 23:51

To 板大:
不好意思
想請問一下 像這樣的google map 有辦法放到
paper3d 的 plane裡面媽?
我是flash 的初學者 最近才開始學 paper3d
但是老師要求我們要想辦法把 google map放進去 plane中
Posted by ahiu
at 2009年10月25日 22:49

To ahiu
放到plane是可以的
pv3d的話 有MovieMaterial
可以將某個MovieClip當作材質來貼圖
將材質的animated屬性設為true
然後再餵給plane即可
困難點在控制的部份
因為繪在3D上 互動部份較麻煩要另外處理
如果不要求放在pv3D的話
倒是可以看看這篇:
http://professionalpapervision.wordpress.com/2009/04/18/putting-3d-google-maps-on-the-web-using-flash-10/
用Flash CS4的內建功能就可以做了
Posted by 熊
at 2009年10月26日 10:53