Linux 上整合 Google Maps API v2、DB2/Informix、PHP 與 JMeter 打造互動地圖應用

為何使用地圖？

網路應用需有效處理龐大地理資訊，圖形化呈現最直觀。Google Maps 以簡單 API 革新線上地圖開發模型，支援拖曳、即時更新無需重載頁面，成為 Mashup (混搭應用) 主流基礎。

應用情境：美國郵遞區號人口統計 Mashup

• 頂部輸入郵遞區號，下方地圖以該區號為中心縮放
• 地圖標示搜尋區號 (星號) 與鄰近區號圖釘
• 圖釘顏色代表人口密度

資料來源與結構描述

資料來自美國人口普查局免費開放資料：

state       CHAR(2)
zip         CHAR(5)
longitude   DECIMAL(16)
latitude    DECIMAL(16)
population  INTEGER
housingunits INTEGER
sqmeters    INT8

關鍵技術棧

Google Maps API v2 + JavaScript + Ajax

• v2 於 2006/04/03 釋出，重新設計核心、縮減封裝、功能增強、99% 向下相容
• 關鍵變更：縮放層級反轉 (newZoom = 17 - oldZoom)、方法名簡化 (getZoomLevel→getZoom)、地圖類型常數改名 (G_HYBRID_TYPE→G_HYBRID_MAP)
• Ajax (Asynchronous JavaScript and XML)：無需重載頁面即時更新地圖圖塊與資料

DB2 REC2XML / Informix genXML

• DB2 REC2XML 函數可直接將查詢結果格式化為 XML，省去 PHP 組裝 XML 步驟
• Informix 對應 genXML 函數語法略異，但輸出含根元素與 XML 宣告，格式更標準

系統架構流程

1. 瀏覽器輸入郵遞區號 → Ajax 送至 Apache
2. PHP + ODBC 連接 DB2/Informix 執行查詢
3. 資料庫回傳格式化 XML (DB2 用 REC2XML，Informix 用 genXML)
4. Ajax 接收 XML → JavaScript 解析 → 呼叫 Google Maps API 載入地圖與圖釘

核心程式碼範例

地圖事件監聽與縮放控制

var maxZoom = 12;
GEvent.addListener(map, 'moveend', function() {
  var center = map.getCenterLatLng();
  // 更新經緯度顯示...
  if (map.getZoom() >= maxZoom) getZips();
  else { /* 清除圖釘與提示放大 */ }
});

v2 縮放方向反轉，故 maxZoom 從 6 改為 12，判斷邏輯由 <= 改為 >=。

DB2 REC2XML 查詢與輸出

SELECT rec2XML(1.0, 'COLATTVAL', 'Zip', zip, state, longitude, latitude, population, sqmeters)
FROM census_data
WHERE longitude BETWEEN -71.2928 AND -71.1723
  AND latitude BETWEEN 42.2915 AND 42.3551
FETCH FIRST 200 ROWS ONLY

輸出片段：

<Zip>
  <column name="ZIP">02458</column>
  <column name="STATE">MA</column>
  ...
</Zip>

PHP 需補充 XML 宣告與根元素再轉發前端。

Informix genXML 查詢

EXECUTE FUNCTION genXMLquery("Zip", "SELECT * FROM census_data WHERE ...");

輸出已含根元素與 XML 宣告，可直接轉發。

JMeter 效能比較

Thread Group 設定 10 用戶/10 秒，每用戶 25 請求，測試 returnMarkers 腳本：

API v2 新增亮點

• 自訂地圖控制項 (GControl 類別)
• 圖釘管理器：顯示/隱藏、高縮放層級聚合避免擁擠
• 路線規劃：每日 10,000 請求額度
• 新增兩個縮放層級，紐約/波士頓/洛杉磯等地解析度更高

後續發展

本文原始碼可供下載作為專案起點，歡迎依需求修改擴充。