UN2120-歷史地理資訊系統實作: Lesson13：Google Maps API for Flash

Lesson13：Google Maps API for Flash

Google在2008年五月推出了Google Maps API for Flash(Google Maps inside of your Flash applications)，採用的是Actionscript 3.0，可將Google Maps加入Flash與Flex應用程式內，目前只支援 Flex，Flex編譯之swf檔,最少280K。優點是比起傳統的JavaScript不但對polyline顯示更快，顯示效能更好(從15-20FPS 到 40FPS)，CPU Load也更低。缺點是目前尚未支援 Flash CS3
　

Step1：官網首頁下載 Google Maps API for Flash SDK (解壓縮後link到lib目錄內的map_flex_1_4.swc)

Step2：官網 Flex Builder 60天試用版424MB(視覺化除錯和設計)

(1).Project Setting --> Flex Build Path --> Library Path --> Add SWC 指定到Google Maps for Flash lib的map_flex_1_4.swc位置

(2).不可以指定檔案路徑的方式Debug，要設定成 http://localhost/檔案名稱。要注意Domain Access問題(crossdomain)??

如果不選擇Flex Builder也可選擇官網下載Flex SDK 97MB，利用SDK命令列的方式指定lib的路徑

c:> mxmlc -library -path+=c:\lib\map_flex_1_4.swc sample.mxml

Step3：設定Flash參數(FB版)

index.template.html
AC_FL_RunContent(
"src", "playerProductInstall",
"FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType= '+MMPlayerType+'&MMdoctitle='+MMdoctitle+"&key=ABQIAA...",
"width", "${width}","height", "${height}",…
(兩處)
<noscript>
<div id="map_canvas" name="map_canvas">
<object classid="clsid:D27…"
id="${application}" width="${width}" height="${height}"
codebase=…>
<param name="movie" value="${swf}.swf" />
…
<param name="allowScriptAccess" value="sameDomain" />
<param name="flashVars" value="key=ABQIA…" />
<embed src="${swf}.swf" quality="high" bgcolor="${bgcolor}"
Key內設可免修改

Step3：簡化設定產出SWF檔案

官網下載swfobject_2_0.zip

Step4：HelloWorld1

*Helloworld.mxml*
<?xml version="1.0" encoding="utf-8"?>
<examples:HelloWorld xmlns:examples="com.google.maps.examples.*"
width="800" height="600"/>
*com/google/maps/examples/helloworld.as*
package com.google.maps.examples {
import com.google.maps.Map;//…import相關packages(其他省略…)
public class HelloWorld extends Map {
public function HelloWorld() {
super();
addEventListener(MapEvent.MAP_READY, onMapReady);
}
private function onMapReady(event:MapEvent):void {
setCenter(new LatLng(40.736072,-73.992062), 14,
MapType.NORMAL_MAP_TYPE);
}
}
}

Step5：HelloWorld2

.mxml:
<mx:Canvas width="320" height="210" id="mapCanvas">
</mx:Canvas>
.as:
…
public class AFCVideoSyncMapClass extends Application{
// map
public var map:Map;
public var mapComponent:UIComponent;
map = new Map();
map.key = “ABQIAAAAamEzLz36u9PG390U...”;//Key內設
mapComponent = new UIComponent();
mapComponent.addChild(map);
mapCanvas.addChild(mapComponent);
map.setSize(new Point(mapCanvas.width - 2, mapCanvas.height - 2));
map.addEventListener(MapEvent.MAP_READY, onMapReady);
...
private function onMapReady(event:MapEvent):void
{
map.enableScrollWheelZoom();
...

Google Maps for flash簡單例子
照片Flip範例 http://gmaps-samples-flash.googlecode.com/svn/trunk/demos/AFCPicasaMapFlip/AFCPicasaMapFlip.html