雜談一個小型WebMap項目的架構(gòu)和技術(shù)實現(xiàn)(GmapAPIjQueryXML)

1、說是小型WebMap項目其實也算不上，因為僅僅是受朋友之托用Google Map API開發(fā)了一個簡單的頁面而已，而我也不是什么架構(gòu)設(shè)計師，也不會什么架構(gòu)設(shè)計，甚至對架構(gòu)都沒有一個概念，按照我的理解，架構(gòu)就是思想，是對一個項目整體從頭到尾從上到下的把握。至于技術(shù)實現(xiàn)，架構(gòu)定義完了技術(shù)實現(xiàn)也就順理成章了，不過個人覺得標(biāo)題還是有點意思重復(fù)了，本文也可能談的比較雜，從需求談到思想談到技術(shù)談到最終的實現(xiàn)，加上本人寫文章又很羅嗦，所以確實如標(biāo)題所言雜談。雖然現(xiàn)在已經(jīng)完全沒有了當(dāng)時的興奮，但確實非常令人高興的，因為我周末花了一點時間，從對Google Map API和jQuery一無所知，最后用他們做成頁

2、面，算是我小試牛刀，但能在這么短的時間內(nèi)見到成果，確實是讓人興奮的。需求分析沒有需求就不能說是項目，沒有需求也談不上什么思想，沒有需求就是空談，所有朋友的需求很明確：因為有很多的主題地圖，所以需要一個WebMap的網(wǎng)站來展示。雖然一句話就已經(jīng)描述完了需求，但還是過于簡單，我們再進一步分析現(xiàn)有的數(shù)據(jù)，是xml形式的，全部是點位信息，點位信息中有很多的內(nèi)容，包括了名稱、地址、電話、介紹和圖片，而一個主題地圖包括了好幾個xml文件?，F(xiàn)在需求就變得非常的明了了，就是按照主題和分類將這些豐富的點位信息展現(xiàn)在WemMap上。架構(gòu)設(shè)計(整體思路+技術(shù)分析)需求分析完后，一個簡單的頁面形式就在腦海中形成了，就

3、是左側(cè)一個WebMap，右側(cè)一個列表，是主題、分類和點位的列表，在左側(cè)WebMap框中點擊這些Marker(也就是Point)就出現(xiàn)一個氣泡框(也就是InfoWindow或者說是Tip)，在氣泡框中顯示點位信息，本來想要把信息放在右側(cè)列表的每個點位的下面的，但考慮到內(nèi)容過多，所以未采用，而這么多的信息，放在氣泡框中也是一個問題，因為氣泡框就那么小，怎么可能放的下，但技術(shù)總是可以實現(xiàn)的。技術(shù)實現(xiàn)方面，首先是WebMap引擎的選擇，我是選擇Mapbar的JS還是Google Map API，最終我選擇了Google Map API，雖然我確實沒用過Google Map API，但考慮它的強大和穩(wěn)定

4、所以就選擇了它了。(這里我還是小小的推薦一下我的Google Map API離線開發(fā)包，因為我周末在家是斷網(wǎng)的，在沒有網(wǎng)絡(luò)的情況下一般是不可能做Gmap開發(fā)的，但我上星期搞了個Google Map API離線開發(fā)包，正好派上用場了，離線狀態(tài)僅僅不顯示地圖的圖片，其余都正常，放到網(wǎng)上的時候只要改掉調(diào)用的js就可用)。其次就是選擇語言了，由于主機是PHP空間，本來準(zhǔn)備將XML放入MYSQL，然后PHP調(diào)用生成XML，這是一個良策，但我不是會寫code，所以放棄了，最終決定直接使用XML實現(xiàn)，雖然直接使用XML的缺點比較多，但僅僅是一個展示就沒有考慮那么多。而XML的解析，又要寫動態(tài)語言code，以

5、前勉強寫過一個ASP的，PHP的肯定不會，所以我必須借助其他工具了，jQuery是我的首選，因為它可以直接AJAX，我想，我要的也確實是AJAX效果。上面的大致思路確定以后就是細(xì)節(jié)了，首先右側(cè)的list，怎么個list，首頁肯定是所有主題地圖名稱的list，點擊一個list后進入到主題地圖，這個時候又是一個list，因為主題地圖中有分類，再點擊分類后出現(xiàn)point list。雖然說有點繁瑣，但暫時沒有其他更好的想法，因為內(nèi)容確實這么多。點擊右側(cè)一個點位名稱后，將該point居中顯示，本來想直接出現(xiàn)氣泡的，但沒有深入研究。而氣泡框因為太小，不足以放下這么多的內(nèi)容，或者說排版也是一個問題，而好在G

6、oogle有TabInfoWindow，在氣泡框分成三個選項卡，分別是主要內(nèi)容、介紹和圖片。最后是文件組織，一個主題包括好幾個XML文件，雖然我可以在HTML中寫死，但我不想造成后期維護的麻煩，所以，給這些XML文件來一個配置文件(配置文件也做成XML的)，寫清楚主題地圖的名稱和所用到的分類名稱以及數(shù)據(jù)文件。既然主題地圖的分類用配置文件來管理了，那么我就索性將所有的主題地圖信息也放到一個獨立的配置文件中，算是配置文件的配置文件。首頁面讀取中總配置文件，得到主題地圖列表，點擊進入某一主題列表，讀取該主題地圖的配置文件，列出分類，點擊分類后讀取數(shù)據(jù)XML文件，這樣就可以list所有的point了。

7、由于使用了AJAX，所以我很方便的將所有的內(nèi)容都放在了一個html頁面+一個js中，就是說兩個文件實現(xiàn)了這個功能，太簡潔了，但URL是一個問題，因為只有一個首頁面，而對于一個主題地圖來說肯定要有絕對路徑，雖然說可以做好多個html頁面，但我不采用那么傻的做法，我直接在首頁面后加上“?關(guān)鍵字”，HTML頁面對URL路徑進行判斷，如果有“?關(guān)鍵字”，那么直接讀取主題地圖配置文件，直接進入主題地圖了，雖然說使用“?關(guān)鍵字”不利于SEO，但僅僅是展示，再說AJAX本身就不利于SEO呢。最終，我用一個HTML頁面和一個JS文件實現(xiàn)了這些功能，并且都很簡單。(如果沒有制作完成，本段不可能如此順理成章，但至

8、少我是在制作過程中不斷的思索與改進，本段也許放在項目總結(jié)中比放在架構(gòu)設(shè)計要合理一些)技術(shù)實現(xiàn)架構(gòu)設(shè)計部分已經(jīng)將所有內(nèi)容都講完了，技術(shù)實現(xiàn)也就變得枯燥而沒有意義了，這里就簡單的寫一下算是技術(shù)的幾個點吧。Web層面：采用DIV+CSS，典型的上中下三層結(jié)構(gòu)，簡單的head和foot，加上中間一個主要內(nèi)容，主要內(nèi)容部分左側(cè)一個地圖DIV，右側(cè)屬性DIV，在這兩個上面再加一個簡單的DIV，因為我要放主題地圖的標(biāo)題或者說明。jQuery：不用不知道一用嚇一跳，真的是非常優(yōu)秀的js框架，我不會js，更不會js+xml，剛開始用是非常郁悶的，甚至連什么時候開始調(diào)用代碼都沒有看出來，而使用ajax的時候更是不

9、斷出錯讓人都想要放棄，但看了一篇入門文章又看了下實例，然后我就寫出了我自己的代碼，最后的時候感嘆，jQuery將虛幻的js變成了面向?qū)ο蟮脑O(shè)計。這里講下我用到的三個內(nèi)容：1，頁面載入的時候如何觸發(fā)JS的function，使用ready(fn)，即$(document).ready或者jQuery(function($)，在這個載入的過程中，我load了Gmap，判斷了URL，然后調(diào)用讀XML文件的function；2，jQuery.ajax(options)函數(shù)，讀取XML文件，$.ajax(url:路徑,type:"GET",datatype:"xml"

10、;,error:function()出錯后你怎么辦,success:function(xml)順利讀取XML后你要怎么做)，這里當(dāng)然最重要的就是success后你如何操作了，就需要對DOM操作了；3，$(xml).find(XML節(jié)點名稱).each(function()循環(huán)獲得你的節(jié)點下的內(nèi)容，這里是解析XML文件了?？磶讉€實例并自己動手處理一下，你就明白jQuery是多么的優(yōu)秀，我僅僅是用了幾個簡單的功能而已。Gmap API：Google不愧為Google，和Mapbar的JS相比，功能不知道要強多少，將所有的地圖和內(nèi)容解析成對象，然后你在這些對象進行屬性和事件操作，直接將復(fù)雜的開發(fā)變成了面向?qū)ο蟮脑O(shè)計。我這里用到的東西非常的少，提一下用到的東西Gmap2必不可少，Gmarker用來標(biāo)注點位，openInfoWindowTabsHtml加載到點擊氣泡生成infoWindow并且是Tab形式的，將新的Gmarker加載到新層的時候需要clearOverlays將層上的東西全部清除。大概要說的基本上就是這些東西，其中有一點，Gmap2你要定義成一個全局的變量，而不能在一個function中，G