2012年2月23日 星期四

既然Flash版GoogleMap不再發新的key…



總覺得自己老是在走偏門…=_=。

自從GoogleMap Flash版停止再發送key值之後,GoogleMap的Flash版本等於正式走入歷史,也因此我們要在flash裡使用GoogleMap的話會變得很頭大。
雖然說以後全flash的網站「理論上」會越來越少,應該都會是flash搭配html一起邁向美好的未來,但是有時難免客戶(或設計師)為了整體視覺著想(或其它因素),一定要在flash使用GoogleMap的話,那就是我們要苦往肚子裡吞的時候了。
這兩天研究了一下,想說看有沒有辦法弄一個簡單的GoogleMap到flash裡,結果似乎是可行的。
說穿了,原理其實就是計算經緯度,然後跟Google「偷偷」的拿取該經緯度下的圖片,再呈現在flash裡而已。

GoogleMap的圖片區塊
可以先參考一下這一篇:
http://code.google.com/intl/zh-TW/apis/maps/documentation/javascript/v2/overlays.html#Google_Maps_Coordinates
要取得圖片的網址很簡單,瞄一下httpWatch的話就會知道,格式類似這樣:
http://mt0.googleapis.com/vt?lyrs=m@170000000&src=apiv3&hl=zh-TW&x=1&y=1&z=15&s=G&style=api|smartmaps
Google把地圖切分成很多區塊,每一個區塊(Tile)的圖片大小是256X256,在不同級數之下會有不同數量區塊,數量的增加是以2的次方在增加的。

也就是說,在縮放等級(zoom)是0的情況之下,世界地圖只有2的0次方=1張的圖片,zoom=2的時候,x軸及y軸各有2的2次方=4張圖,一共16張圖。
有了這個概念的時候,我們就可以依照zoom的大小,配上實際經緯度投射到平面座標上的點,來找出目前該經緯度所對應到的圖片,然後再從Google那邊把圖抓回來就對了,剛剛上面的圖片網址裡,x及y就是代表該區塊的index值,z則是縮放值。

經緯度的投射座標
既然已經知道地圖被切成多少區塊,就很方便取得了,但麻煩的在於經緯度。
GoogleMap使用的是「麥卡托投影法」來計算經緯度,請參考wiki:
http://zh.wikipedia.org/wiki/%E9%BA%A5%E5%8D%A1%E6%89%98%E6%8A%95%E5%BD%B1
這種投影法將地球投影成圓柱狀體,也因此,經度的部份是從最左邊的-180到最右邊的180度,平均均分地圖上的所有x軸距離。
於是我們可以很簡單的計算出某一個經度應該對應到實際像素裡的哪一個x值,因為經度是平均切割整個世界地圖的,所以純粹只是比例的換算而已。
麻煩的在於緯度。
緯度並不是平均切割地球的從南到北,越靠近極點,形變就越大。
感謝wiki,我們不用自己去導出投影的公式,wiki已經幫我們列出來了:

上半部是由經緯度計算出x及y的值,下半部是由x跟y的值反算出經緯度,由於我們要將經緯度用在GoogleMap圖片的像素值上,因此我們只要再加上一些參數做修正其實就可以了。

結果
我花了一點時間實作了一下,結果在這邊:

http://labs.medialand.com.tw/jason/flash/googlemap/
原始檔下載
輸入經緯度及放大級數,這flash就會把周邊的地圖載入進來。
其它的,例如:拖動地圖…等等的,我就沒時間再寫了,反正都已經能正確取得圖片及計算出座標值,其它的就是另外一種工作了。
比較需要注意的是
1. 這只是簡單的地圖,畢竟不能跟完整個GoogleMap相比(當然你要寫得超屌也可以)
2. 經過測試,無法去draw載進來的地圖,crossdomain的關係。
3. 一樣是crossdomain的關係,其它的GoogleMap api,像是地址反查這種功能,在web的flash裡也無法直接去做query,可能還是得透過js去做中繼。
4. 這是旁門左道,非必要的話還是請愛用GoogleMap v3。


2012年2月16日 星期四

JS+CSS練習 - 米蘭數位官網HTML版本



持續的玩CSS及JS中。



因此拿了米蘭的官網來練習。
米蘭官網連結在這ㄦ - http://medialand.com.tw/home.htm
練習結果在這ㄦ - http://labs.medialand.com.tw/jason/html/ml/

比官網少了一些單元,因為跟資料庫要資料的部份我(目前)懶得去寫…。
一開始我傻傻的,想說在畫面上轉來轉去的那些球,「搞不好」可以直接用dom來跑就好,畢竟只是scale的縮放,沒有複雜的變形,只要把透視給算好就ok了。
於是就試寫了第一版,下場就是效能十分之慘。
苗頭不對之下,只好乖乖的用canvas來處理這些轉圈圈,效能果然好很多了。但由於老IE不支援canvas,所以我仍然保留原本的dom版本,只要判斷瀏覽器不支援canvas,就會把dom拿出來跑…。

練習的作品我是盡量把它寫得很像原本flash版本的效果,我也是用像寫AS的概念一樣去安排配置畫面上的東西,但只能盡量,多少還是有一點點的差異,不過畢竟是練習作,練習中學到的經驗比較重要。
主要的一些(奇怪的)心得就是:
1. 把div當成DisplayContainer來用XD…。
2. 空白的div可以拿來當按鈕感應區…。
3. 還沒找到很好用的tween(好啦,我自己也沒很用心的去找),現在只能自己用setInterval去跑,或是簡單的就交由JQuery的animate去跑。
4. Canvas要判斷滑鼠是否over到某顆球上的這件事,小麻煩啊…,尤其是兩顆球如果疊在一起就更討厭了,現在只是球狀還好,之後如果寫到複雜圖案的時候,就會又點傷腦。
5. 除了canvas以外,其它的東西其實一熟練的話處理起來還算快,反正遇到困難的結構就是二話不說多加幾個div來當DisplayContainer!!(但我先說,這可能不是很正統的做法XD)