最近一段時間手頭沒有啥具體事情需要忙, 就抽空學習下ExtJS, 並把原先採用BCB6開發的一個組態工具上功能遷移整合到現有的Web平台上來; 剛好可以實踐鞏固下ExtJS, 其中有個地區配置功能打算把以前做的Google Maps也整合進來, 那Google Maps原先採用的是Google Maps JavaScript API V2, 需要註冊申請API Key, 用起來不是那麼方便; 現Google在2009上半年推出了不需要API Key的Google Maps JavaScript API V3版本, 打算順便學習下. Google Maps 相關資料可以參考我原先整理的一篇博文Web開發系列 - GIS或者訪問其官方網站Maps API 系列. 接下來介紹一下簡單ExtJS 2.x + Google Maps JavaScript API V3整合應用 - 地區配置功能(示範地圖準系統、支援相關位置標記、拖動標記改變位置).
1、我們先建立一個相關HTML頁面gmap.html, 加入ExtJS依賴項,如相關css,js指令檔
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" /><script language="javascript" src="ext/adapter/ext/ext-base.js"></script><script language="javascript" src="ext/ext-all.js"></script><script language="javascript" src="ext/ext-lang-zh_CN-min.js"></script>
2、引入Google Maps JavaScript API 指令檔(因為不是相關GPS應用,我們這裡設定其相關參數sensor=false)
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>
3、地區配置視窗相關JavaScript代碼
4、最終呈現結果下,gmap.html檔案下載