2009年10月27日 星期二

Flash版GoogleMap使用街景


前一陣子(好大一陣子),GoogleMap的台北街景上線,順便的我發現GoogleMap api for flash也有多了一些東西,像是路徑規劃、3D地圖等等…。
3D地圖基本上只是把地圖變成可以旋轉改變角度而已,事實上仍然是平面的,「非常的」耗效能,國外是有人把建築物用pv3D直接疊在3D地圖上感覺像是Google Earth一樣,但是說真的我的電腦已經算不慢的了,跑起來還是慢到可怕…。

說起來比較讓人興奮的應該是路徑規劃了吧。
之前Flash版的GoogleMap少了這個總覺得少了什麼,現在有了就好多了。
不過這一篇不是要講路徑規劃的部份,而是要講街景。
之前因為台灣都沒有街景,所以一直沒去碰這個,現在台北有了,就很好奇的想把街景跟Flash的GoogleMap結合起來看看。
有把玩過GoogleMap街景的應該都會注意到,街景的介面是Flash的,我想這是因為Flash在處理圖片的移動及blur這些部份是比js來得方便的原因吧?但是目前為止雖然街景介面本身是個Flash,但是仍然無法直接被Flash版的GoogleMap直接載入使用,所以我只好用土法練鋼的方法 – 透過js溝通。

Google在文件上寫得還算清楚明白,大概看一下就知道怎麼叫出街景了,挺簡單的。
先從html開始,首先載入GoogleMap的js,要改變的只有key這個變數,key就是跟Google申請的api key。
然後在body上加入onload跟onunload的處理方法,我這邊是先分別指定initialize()跟unloadAll()兩個function來負責。onunload一定要處理,否則很有可能會造成記憶體沒有回收的狀況。


由於地圖是由Flash來處理,因此就不產生js的GoogleMap實體。
所以直接宣告廣域的街景物件(GStreetviewPanorama)及一個判別是否由flash版GoogleMap指定座標的flag。由於GStreetviewPanorama需要一個dom來放置,所以在html裡我們放一個div來裝GStreetviewPanorama。
然後就編寫initialize()及unloadAll()。


GStreetviewPanorama的error事件我們主要會用到的大概是兩個:
1. 錯誤代碼603:表示沒有Flash Player。
2. 錯誤代碼600:被指定的座標沒有街景。
基本上這兩個都要實作,以避免出問題。
而GStreetviewPanorama的initialized事件,則是當GStreetviewPanorama的座標位置改變的時候會被觸發,因此我們可以監聽這個事件來控管目前地圖跟街景之間座標的同步。
因此這兩個事件處理函式應該會很像是這樣子:


最後就很簡單了。
需要顯示哪邊的街景時,就直接從Flash版的GoogleMap用ExternalInterface去呼叫一個function來指定GStreetviewPanorama的座標就好。


在看文件時,其實js的GoogleMap有一個優點是可以把目前有支援街景的路線疊上一個overlay在地圖上,但是Flash版的沒有,所以如果要用Flash版的GoogleMap去結合街景,使用者只能用「試試看」的方式去點選某條路是否有街景,這是比較不方便的,也許也只能等Google下次更新Flash api時再期待會不會有這功能出現了。