Flex中嵌入Google地圖

 

在我們開始之前，先來看一個例子：http://scriptplayground.com/article_files/Installing-and-Using-Google-Maps-in-Flex/main.html

本文將介紹如何使用Flex Builder建立一個Flex內嵌Google Map的例子。首先呢,先下載 Google Maps SDK【解壓到某個文件夾內，找到lib內的map_flex_1_1.swc，到時候需要導入Project中】,以及去申請一個developers API key.【申請的時候需要填寫網頁地址：如果你使用本地的連接測試：比如http://localhost:8080/GoogleMap，這樣填寫就好了，GoogleMap是我們將要建立的一個Flex Project 名字】。打開Flex Builder,新建Flex Project【File > New Flex Project】:GoogleMap。我使用的BlazeDS建立我的Web形式的Application【使用的服務器是J2EE】。這樣最後建立好之後，需要導入map_flex_1_1.swc【右鍵點擊GoogleMap-properties--Flex build path--library path--add swc..】

之後就可以開始我們的Google Map之旅了。

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%" initialize="init()"> <mx:Script> <!--[CDATA[ ]]--> </mx:Script> <mx:UIComponent id="mapContainer" width="100%" height="100%"/> </mx:Application> 

代碼中添加了一個標記<mx:UTComponent>制定了寬度和高度，其實這裏的id="mapContainer"就是裝入GoogleMap的一個容器。你必須指定一個唯一的id,否則Flex無法識別加載。接着下載需要的packet.

import com.google.maps.Map; import com.google.maps.MapEvent; import com.google.maps.MapType; import com.google.maps.LatLng; 

緊接着定義一個變量指向google map 的一個實例。

private var gMap:Map; 

接下來就開始定義一個init()的函數，該函數在Flex程序被加載的時候被調用，用來完成程序的實例創建以及屬性的配置。當這些都被設置好了之後，你要在地圖被完全加載的時候創建一個event handler來把地圖潛入mapContainer指定的位置。

private function init():void { gMap = new Map(); gMap.key = "{YOUR_API_KEY_HERE}"; gMap.width = 600; gMap.height = 400; gMap.addEventListener(MapEvent.MAP_READY, mapReadyHandler); mapContainer.addChild(gMap); } 

最後就是在map完全加載的時候定義的event handler，指定了顯示地圖的座標以及設置應用程序的大小。完整的代碼：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%" initialize="init()" viewSourceURL="srcview/index.html"> <mx:Script> <!--[CDATA[ import com.google.maps.Map; import com.google.maps.MapEvent; import com.google.maps.MapType; import com.google.maps.LatLng; private var gMap:Map; private function init():void { gMap = new Map(); gMap.key = "你申請的key"; gMap.width = 600; gMap.height = 400; gMap.addEventListener(MapEvent.MAP_READY, mapReadyHandler); mapContainer.addChild(gMap); } private function mapReadyHandler(e:MapEvent):void { gMap.setCenter(new LatLng(42.334184,-71.018372), 13, MapType.HYBRID_MAP_TYPE); gMap.setSize(new Point(mapContainer.width, mapContainer.height)); } ]]--> </mx:Script> <mx:UIComponent id="mapContainer" width="100%" height="100%"/> </mx:Application> 

 

編譯執行【http://localhost:8080/GoogleMap/GoogleMap.html】你就會看到demo中的效果了。但是如果你使用的不是http這種瀏覽方式，比如是file:///等看到的圖片可能會有debug的符號。