2009年01月18日 19:08

【介紹】在Flash中使用Google Maps API

Google於2008年釋出了Google Maps API for Flash,5月時還只支援Flex,現在已經可以在Flash CS3中編譯,這麼棒的工具當然要用用看~

要在Flash中加入Google Map很簡單,只需要以下幾個步驟:
  1. 註冊一組API Key,基本上算不上什麼註冊動作,只是產生一組字串供使用而已。一個步驟就解決。
  2. 下載SDK並解壓縮 (同時包含Flex和CS3)
  3. 將檔案裡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)
  4. 打開Flash CS3,工具列中的視窗(window)-組件(Components),將GoogleMapsLibrary拖到元件庫(Library)裡,注意目前只支援AS 3.0的檔案。
  5. 雖然做成了組件,事實上還是得動態產生,接下來只要輸入程式碼就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

但是上述程式執行結果,看起來怎麼只有一張圖呢,和Google地圖裡看到的不太一樣,其實控制列要自己加,在onMapReady函式裡新增以下程式碼:
// 這裡是要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需搭配網路才能使用。



  • esabear 發表於樂多回應(5)引用(1)Flash筆記編輯本文
    樂多分類:網路/3C │昨日人次:4 │累計人次:3179 │標籤:google,介紹,API
    Ads by Roodo! 

    引用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做嗎?或是用其他方式
    不知道你是否可以給一個方向
    謝謝
    | 檢舉 | 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
    你好,請問一下!我在FLASH CS4下輸出會有"警告: 濾鏡將無法運算。DisplayObject 已套用濾鏡的尺寸 (2097158, 819206) 過大,因此無法繪製。"錯誤訊息!
    另外丟進localhost本機站台無法觀看,是跟我申請key所輸入的網域不符合的關係嗎
    謝謝
    ---------------------------------------------
    版主回覆:
    嗯~網域要相符
    另外濾鏡套用的對象不能太大(寬與高都要小於2880)
    | 檢舉 | Posted by bryan at 2010年03月22日 15:04