Quickribbon 橘子電腦™官方部落格: [專給技術人員閱讀]Orangmap Flash Api完成

[專給技術人員閱讀]Orangmap Flash Api完成

 _______________________________________________________
請先下載在閱讀:

_______________________________________________________



關於orangmap Api的網頁圖片抓取使用 我們透過google的服務來製作oramgmap,以下提供一段Flash Map的製作步驟,請閱讀:

撰寫地圖 API (Flash 版) 的「Hello World」

要瞭解如何在 Flash CS3 中建置「Ornagmap API (Flash 版)」，最簡單的方法就是查看簡單的範例。在此教學課程中，我們會建立一支簡單的 Flash 電影，新增一些 ActionScript 程式碼，將該檔案匯出為 SWF 檔，並在瀏覽器中啟動，進行目視檢查。

建立專案

將「Ornagmap (Flash 版)」元件新增至 Flash CS3 之後，啟動 Flash 應用程式並在「歡迎使用」畫面選取 [開新檔案 -> Flash 檔案 (ActionScript 3.0)]。

(如果您沒有看到歡迎畫面，請選取 [檔案 -> 開新檔案]，並從 [新增文件] 對話方塊選取 [Flash 檔案 (ActionScript 3.0)]。)
Flash CS3 啟動後會顯示空白的畫布 (稱為「舞台」)。如果 [時間軸] 面板尚未顯示，請透過 [視窗 -> 時間軸] 來選取它。
  
選取 [視窗 -> 元件]。會顯示 [元件] 對話方塊。按一下 [Google] 選取器，以顯示「GoogleMapsLibrary」元件。

按一下 [GoogleMapsLibrary] 並將它拖曳至 [舞台]。空白的舞台上會出現細藍邊框的界限方塊。您不用擔心此元件是否在正確的位置上，因為這個方塊不會影響地圖的實際位置。

撰寫程式碼

「Ornagmap API (Flash 版)」的地圖是使用 ActionScript 3.0 程式碼來進行操作。此教學課程不是要深入探究 ActionScript 的每個小細節。您在下列位置可以找到 ActionScript 的線上教學課程：

開啟動作編輯器

在 Flash CS3 的 [時間軸] 視窗中，以滑鼠右鍵按一下您選擇的影格，並選取 [動作] 選項。會顯示 [動作 - 影格] 對話方塊。請確認從下拉式功能表選取 [ActionScript 3.0]，並在編輯區域輸入下列程式碼。(我們會在後續章節說明此程式碼。)







(下面已提供此程式碼，供您剪貼使用。)
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;

var map:Map = new Map();
map.key = "your_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);
}
就算只是這個簡單的程式碼片段，仍然有幾個地方值得注意：
  1. 我們從 com.google.maps.* 命名空間匯入一組程式庫。
  2. 我們具現化 Map 物件，並設定 map 的 API 金鑰。
  3. 我們設定 map 的大小，以符合舞台的大小。
  4. 我們新增事件接聽程式，以便於地圖準備顯示時通知我們。
  5. 我們將地圖附加至 Flash 電影。
  6. 在事件接聽程式中，我們將地圖的中心放在 Manhattan。

    這些步驟詳細說明如下。

匯入程式庫


    import com.google.maps.LatLng;
    import com.google.maps.Map;
    import com.google.maps.MapEvent;
    import com.google.maps.MapType;
ActionScript 程式庫會以 import 宣告匯入。在上述範例程式碼中，我們匯入了幾個「Google 地圖 Flash」程式庫。如果要成功編譯 SWF 檔，必須匯入範例程式碼中使用類型的程式庫。我們建議您只匯入需要用到的那些類別。

宣告地圖

var map:Map = new Map();
map.key = "your_api_key";
com.google.maps.Map 物件是「Ornagmap API (Flash 版)」程式庫中的基本物件。我們在此具現化 Map 物件，並指派它給 map 變數。然後，我們將 map 的key Property 設定給已註冊的 API 金鑰。
注意：除了此教學課程內容之外，本使用說明的範例程式碼設定使用 Flex 架構。大部分的程式碼都可以在 Flash CS3 中使用。不過，您至少需要建立一個 map 變數 (如這裡所顯示)，才能參照 Map 實例；而且您需要設定 map，並將它直接附加至 Flash 電影物件 (如本教學課程所示)。

設定地圖大小

map.setSize(new Point(stage.stageWidth, stage.stageHeight);
為了簡便起見，我們希望地圖的大小能夠符合 Flash 舞台。要達到這種效果，可以依照全域 stage 物件的 stageHeight 和 stageWidth Property 來設定 map 的大小。
注意！此使用說明所提供的 Flex 範例中，不需要使用 setSize 方法設定明確的大小。不過，Flash CS3 開發人員需要新增此方法，才能使用那些範例。

設定事件接聽程式

map.addEventListener(MapEvent.MAP_READY, onMapReady);
ActionScript 就像 JavaScript，是一種事件驅動的程式設計語言。Flash 物件中的使用者互動，是透過為物件特定事件的事件接聽程式來處理。
我們在此處為 Map 物件的 MapEvent.MAP_READY 事件新增事件接聽程式。此事件處理常式就像是「Ornagmap API (Flash 版)」應用程式初始化的「勾點」。只要地圖接收到該事件，就會呼叫 onMapReady 函式 (如下所示)。
function onMapReady(event:MapEvent):void {
  setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);
}
此 onMapReady() 函式傳送類別 MapEvent (在此情況下會忽略) 的 event 參數，然後使用指定的參數 (定義位置、縮放等級以及要顯示的地圖類型) 呼叫setCenter()。
注意：您也可以攔截並處理 MapEvent.MAP_PREINITIALIZE 事件，用以初始化您的地圖。如需關於此事件的詳細資訊，請參閱 MapOptions 的討論。
在「Google 地圖」Flash 使用說明的地圖事件章節中，會進一步討論事件。

附加地圖

this.addChild(map);
最後，我們要將 map 附加至 Flash 電影本身。作法就是呼叫 this.addChild(map)。請注意，我們使用 this 關鍵字來直接使用 Flash 根目錄元件 (在此案例中為時間軸物件。)

測試 Flash 電影

我們現在可以準備啟動 Flash 電影。請選取 [控制 -> 測試電影]。Flash CS3 將會編譯 ActionScript 程式碼，並啟動內部的 Flash 播放器以偵錯。您會看到小型的地圖，其中心位置為 Manhattan。

請注意，因為此 SWF 檔是透過本機檔案系統使用，所以會顯示於「偵錯」模式。

匯出 SWF 檔

如果一切都如預期的順利運作，我們就可以建立 SWF 檔案，稍後再張貼在公開網站上，供外界使用。步驟如下：
  1. 選取 [檔案 -> 匯出]。會顯示 [匯出電影] 對話方塊。


  2. 為您的檔案選取名稱 (例如 MapSimple.swf，並將格式保留為 Flash Movie)。會顯示 [匯出 Flash 播放器] 對話方塊。


  3. 請確認 [本機播放安全性:] 設定為 [僅存取網路]。這樣可以確認 Flash 播放器可以與 Google 的伺服器通訊，抓取「地圖 API」程式庫。





    4. 按一下 [確定]，就會建立您的 SWF 檔。
如果按兩下這個檔案，會啟動預設瀏覽器，我們就可以直接檢視此 SWF 檔。再次提醒，此檔案是透過本機檔案系統使用，所以會顯示於「偵錯」模式。

在網頁中主控 SWF 檔

如果「Google 地圖」的 Flash SWF 檔是以包含 API 金鑰的方式編譯，就可以用獨立檔案的方式顯示。這種作法有利於測試，但對於正確的網頁配置可能不夠實際。因此，您可能要設定 HTML 頁面來包含 SWF 檔。為了確認您的 SWF 檔可以在 Internet Explorer 和其他瀏覽器中執行，您應該在 object 和 embed 標籤之間都新增 SWF。
包含我們的 MapSimple.swf 檔案的簡單 HTML 頁面顯示如下。我們必須在網頁上預留顯示地圖的位置。我們在此範例中建立名稱為 div 的元素，並新增 object元素至其中，來達成此目的。





 id="map_canvas" name="map_canvas">
           classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"       codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"       width="800px"       height="600px">        name="movie" value="MapSimple.swf">        name="quality" value="high">        name="flashVars" value="key=your_api_key">                width="800px"         height="600px"         src="MapSimple.swf"         quality="high"         flashVars="key=your_api_key"         pluginspage="http://www.macromedia.com/go/getflashplayer"         type="application/x-shockwave-flash">            
 
請注意，我們在 flashVars 參數中新增 API 金鑰參數。如果使用這種註冊方法，就不需要將您的金鑰直接編譯至 ActionScript 程式碼中的 SWF 檔 (透過指派map.key)。如果在此指定值，指定的值就會覆寫 SWF 檔中包含的值。另請注意，API 金鑰必須符合裝載 SWF 檔案的網域，而不是裝載 HTML 檔案的網域。
產生的 HTML 頁面顯示如下。
  
下載 Flash 檔案 (SimpleMap.fla)

恭喜您！您已經完成第一支與Google Api資料庫合作的「Orangmap」Flash 應用程式了！

沒有留言:

張貼留言