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)??

flexbuildsetup.jpg

 

如果不選擇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

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("AFCVideoSyncMap.swf", "myContent", "800", "400", "9.0.0"); </script>

<div id="myContent"><p>Alternative content</p></div>

 

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

flashsample1.jpg

旅遊範例 http://googlemapsapi.blogspot.com/2008/05/introducing-google-maps-api-for-flash.html

flashsample2.jpg

 

開車模擬 http://geoquake.jp/en/webgame/DrivingSimulatorGM/

flashsample3.jpg

資料來源:http://rd.lanma.org/2008/06/google-maps-for-flash_08.html

 

Tutorial: Thematic mapping with Google Maps Flash API

http://gvlt.wordpress.com/2008/05/17/tutorial-thematic-mapping-with-the-google-maps-flash-api/

 

設定與使用文件 http://code.google.com/apis/maps/documentation/flash/intro.html 

Last modified: Wednesday, 18 December 2013, 04:49 PM