本站小編為你精心準備了基于JavaScript的離線電子地圖論文參考范文，愿這些范文能點燃您思維的火花，激發您的寫作靈感。歡迎深入閱讀并收藏。

1javascript腳本編寫使用的技術及其特點

（1）Div+CSS布局設計Div（division）是HTML中的一個元素，是標簽，用來為HTML文檔內大塊（block-level）的內容提供結構和背景的元素。Div的起始標簽和借宿標簽之間的所有內容都是用來構成這個塊的，其中所包含的元素的特性由Div標簽的屬性來控制，或者通過使用樣式表格式化這個塊來進行控制。CSS（CascadingStyleSheets）是一種用來表現HTML或XML等文件樣式的計算機語言。Div+CSS是網站標準中的術語之一，通常為了說明HTML網頁設計中的表格（table）定位方式的區別，因為XHTML網站設計標準中，不再使用表格定位技術，而是采用Div+CSS的方式實現各種定位。（2）JS修改Div樣式①局部改變樣式局部修改樣式分為改變直接樣式、改變className和改變cssText三種。②全局改變樣式通常情況下，我們可以通過改變外鏈樣式的href的值實現網頁樣式的實時切換，也就是“改變模板風格”。（3）JS實現DOM事件響應DOM，即文檔事件模型，是W3C（萬維網聯盟）的標準。DOM定義了訪問HTML和XML文檔的標準。W3CDOM標準被分為三個不同的部分。①核心DOM——針對任何結構化文檔的標準模型。②XMLDOM——針對XML文檔的標準模型。③HTMLDOM——針對HTML文檔的標準模型。DOM節點樹如圖1所示。JS響應DOM事件是利用對元素對象的事件屬性（onmousedown，onmousemove等）的響應來調用JS文件的函數。

2離線電子地圖功能的實現

2.1JS腳本的設計思路本設計中JS腳本的總體設計思路是通過給定顯示區域左下角圖片的路徑，按照一定順序計算得出顯示區域內共4×3個圖片的路徑，寫入HTML客戶端，每次拖動后先計算左下角圖片路徑，然后根據其路徑動態刷新顯示區域。放大時則通過更換圖層來動態刷新顯示區域。總體設計框圖如圖2所示。

2.2計算路徑函數的實現在整個腳本的開始，我們調用計算路徑函數（count（s）），通過左下角圖片的路徑按照xoy坐標系的順序，算出整個顯示區域（4×3）內所有圖片的路徑，并將其保存在數組e中。同時，以數組e為實參調用顯示函數（display（e））。具體實現方法如下。（1）使用if語句判斷圖片的Z坐標，確定其所在的圖層。（2）使用if語句判斷圖片X坐標和Y坐標，如果其坐標超過所能顯示的最大值或最小值時，修改其坐標值，使其符合要求。（3）使用for語句，建立一個雙重循環，按照先Y坐標自增再X坐標自增的順序，將顯示區域內4×3個圖片的路徑存入字符串ss。（4）使用ss.split()方法，從空格處將字符串ss分割開，存入數組e中。（5）調用display（e）函數，將數組e作為參數傳入display（e）中。具體流程圖如圖3所示。

2.3顯示函數的實現顯示函數（display（e））通過遍歷路徑計算函數出來的數組e，將其每一個元素傳入排版函數（placing（e[i],i）），并將從排版函數返回的經過Div+CSS設計的HTML語言通過document.id.innerHTML屬性寫入HTML客戶端，從而實現排版顯示。具體實現方法如下。（1）使用foreach方法遍歷數組e，將數組的元素作為參量調用函數placing（e[i],i）。（2）使用地圖容器（map_content）的innerHTML屬性，將經過運算的HTML語句輸出到Web客戶端，實現圖片的顯示。具體流程圖如圖4所示。

2.4排版函數的實現排版函數（palycing（e[i],i））通過if-else結構根據形參i的大小分別返回不同的字符串。字符串的內容為經過內部樣式表設計的Div模塊，以及嵌于Div中的圖片。具體實現方法如下。（1）使用if語句判斷形參i的大小。（2）使用內部樣式表設計Div，并根據形參i的大小將圖片標簽嵌入Div中。（3）使用return語句返回保存有Div標簽和img標簽的HTML語句。具體流程圖如圖5所示。

2.5拖動響應函數的實現拖動響應函數通過對Div對象的event.onmousedown、onmousemove和onmousueup等事件的響應，調用函數。通過計算地圖容器和圖片顯示區域之間的相對位置，從而設置圖片顯示區域的offsetLeft和offsetTop屬性，實現地圖的拖動。然后，計算拖動的絕對距離，得出拖動后左下角圖片文件的xyz坐標，作為全局變量s的新值保存。具體實現方法如下。（1）計算拖動前圖片顯示區域相對于地圖容器的距離，存入deltaX和deltaY中。（2）將函數movehandler和up-handler分別附加到當前文檔對象模型（DOM）對象上的事件onmousemove和onmouseup上。（3）利用設置event.cancelBu-bble屬性取消事件的起泡響應，防止拖動函數導致地圖容器的移動。（4）設置event.returnValue為false，取消事件的返回值。（5）當響應onmousemove事件時，調用函數movehandler，計算移動的絕對距離以及拖動完成后地圖容器和圖片顯示區域的相對距離。（6）通過修改圖片顯示區域Div的offsetLeft和offsetTop屬性完成拖動。（7）當響應事件onmouseup時，調用函數uphandler。取消事件onmousemove和onmouseup與函數movehandler與uphandler的綁定，并取消起泡響應。（8）調用函數thenext，計算拖動前被選中的圖片所在的Div相對于整個地圖容器的距離。并且計算拖動后左下角圖片的具體坐標，然后調用路徑計算函數count（s）。具體流程圖如圖6所示。

2.6放大函數的實現放大函數（bigger（））通過響應事件ondbclick，按照16~19的順序，依次循環改變圖層和相應的圖片，將相應圖層左下角圖片作為參量傳入路徑計算函數。具體實現方法如下。（1）判斷當前圖層的z坐標。（2）按照16~19的順序依次循環修改下一個圖層的z坐標，并作為參數傳入路徑計算函數。具體流程圖如圖7所示。

3離線電子地圖的調試結果

3.1拖動響應函數的調試結果拖動響應函數調試的結果如圖8所示。由圖8可知，拖動響應函數基本上達到了設計要求，但在動態刷新方面存在延遲比較明顯，可采用AJAX技術進行改進。

3.2放大函數的調試結果放大函數的調試結果如圖9所示。由圖9可知，放大函數的效果很好地滿足了連線電子地圖設計的需要。

3.3顯示與排版函數調試的結果顯示與排版函數調試的結果如圖10所示。由圖10可知，顯示與排版函數的效果實現了設計的要求。

作者：徐濟仁李洲暉單位：合肥電子工程學院