Home > TaiBIF > Taibif 的 Google Map 應用-1

Taibif 的 Google Map 應用-1

May 5th, 2009

因為 Taibif 有展示資料地理分布的需要,所以我使用 Google Map 完成了這個應用(結果如圖一),實際操作畫面請見 http://taibif.org.tw/?tid=459。這個應用是用不同顏色的 div 區塊表示某個範圍內的資料數,當使用者改變解析度或是拖曳地圖的可視範圍時,地圖會動態的畫出區塊的大小顏色位置,使用者也可以點選 div 區塊,連結到區塊內相關資料的網頁。

圖一

圖一

 

Google Map API 網站寫到,如果您想開發 Google Map 相關網站的話要先去申請一組 API Key 然後才可以開始開發。但是我自己的經驗是如果您只有在電腦本地端(http://localhost)玩的話其實也不必申請 API Key,直接到 Demo 頁找一個範例,然後網頁上按右鍵檢視原始碼,使用範例的 API Key 就可以了。此外,如果您自己的電腦沒有安裝網頁伺服器但是又想試看看 Google Map 的話,也可以到 Google Map 的 Code PlayGround,將您的 javascript 直接打上去玩看看。

因為這篇文章的主題是在介紹這次開發出來的應用,所以我就不介紹 Google Map 的基本語法了,有興趣的朋友請參閱 Google Map API 或是查詢有關的教學網站。以我自己為例,我是先看完 API 網站上面的 Developer Guide 文件後,再找到可以參考的 Demo 範例,然後再去搜尋其他相關網站的技術介紹後完成這次的程式。

這個程式是由 php+javascript+google map 完成,用 div 區塊的不同顏色代表在一個範圍(例如長寬各四十公里的矩形)內,從 mysql 資料庫中根據查詢條件篩選出來的資料筆數,例如紅色方塊代表的是在該區塊中有大於或等於五百筆篩選出來的資料。隨著解析度(zoom)的改變,div 區塊所代表的範圍大小也會有所變化,也可以點選色塊超連結到介紹該色塊內資料的網頁。因為 google map 可以使用游標拖曳改變可視範圍,這個程式也可以根據可視範圍動態產生畫面中的色塊,在可視範圍外或是在該解析度下不需要顯示的色塊就不會出現以節省客戶端電腦的運算時間。

當客戶端送出瀏覽要求與瀏覽條件到伺服器端後,由伺服器端 php 程式根據要求到 mysql 資料庫取出符合條件的資料,結合 php 檔案內的顯示相關設定產生客戶端 javascript 與 html 程式碼。伺服器端以 GET 的方式取得客戶端的瀏覽條件,在處理瀏覽條件後產生 SQL 查詢條件到資料庫取出資料,這些取出的資料會以 data 物件的方式呈現在 javascript 中。到目前為止(2009/04/23)php 檔案內的顯示相關設定包括:

  • 最大最小解析度(6 ~ 11)。
  • 色塊範圍的陣列(40公里,10公里,2公里)。
  • 色塊顯示範圍可以出現的解析度陣列(例如40公里的區塊可以出現在 google map 解析度為6,7,8,9時)。
  • 色塊顯示為灰階時的解析度陣列(例如40公里的區塊在解析度為8與9時顯示為灰階)。
  • 可產生超連結的色塊範圍(當色塊範圍為2時可點選該 div 區塊超連結到別的網頁)。
  • map 顯示的中心點。
  • 顯示的最西南端與東北端((21, 119) 與 (27, 123))。
  • 色塊顯示的顏色陣列、色塊透明度陣列、資料數陣列、色塊內文字顏色陣列、邊界寬度、灰階顏色與色塊內文字灰階顏色。

在取得資料庫資料與設定好以上資料後就可以開始產出 javascript 程式碼了。

Categories: TaiBIF Tags: , ,
Comments are closed.