基于高德地圖開發(fā)公交查詢系統(tǒng)項(xiàng)目在JavaScript課程教學(xué)中的應(yīng)用

吳國華

摘要：JavaScript語言編程是職業(yè)院?！毒W(wǎng)頁編程》課程中的基礎(chǔ)組成部分，教學(xué)中開發(fā)項(xiàng)目的選擇對(duì)于枯燥的語言編程學(xué)習(xí)起到舉足輕重的作用。該文基于高德地圖JavaScriptAPI程序?yàn)殚_發(fā)環(huán)境，以開發(fā)公交查詢系統(tǒng)項(xiàng)目為案例，使學(xué)生有效地掌握J(rèn)avaScript語言編程，激發(fā)學(xué)生自主學(xué)習(xí)的興趣，培養(yǎng)學(xué)生軟件項(xiàng)目開發(fā)的能力。

關(guān)鍵詞：高德地圖；公交查詢系統(tǒng)；JavaScript；課程教學(xué)

職業(yè)院校的教育注重學(xué)生的參與性與實(shí)踐性，“項(xiàng)目引領(lǐng)，案例驅(qū)動(dòng)”的教學(xué)方法被廣泛應(yīng)用于各個(gè)專業(yè)的教學(xué)之中，如何選擇學(xué)生感興趣而又具有開發(fā)價(jià)值的項(xiàng)目成為教師教學(xué)的重點(diǎn)和難點(diǎn)，也是課程教學(xué)中的一個(gè)關(guān)鍵所在。

在計(jì)算機(jī)網(wǎng)絡(luò)專業(yè)開設(shè)的《網(wǎng)頁編程》課程中，JavaScript語言編程是課程的基礎(chǔ)部分，是學(xué)生進(jìn)行Web應(yīng)用程序開發(fā)的必要知識(shí)和技術(shù)支持。然而，對(duì)于一年級(jí)的學(xué)生來說，進(jìn)行抽象的語言學(xué)習(xí)是十分困難的，要讓枯燥的語言變得生動(dòng)，要讓無趣的代碼實(shí)現(xiàn)價(jià)值就要找到學(xué)生的興趣所在，投其所好地選擇教學(xué)案例，讓學(xué)生從被動(dòng)學(xué)習(xí)轉(zhuǎn)為主動(dòng)參與。在本課程的教學(xué)中，筆者選擇了學(xué)生感興趣的高德地圖作為開發(fā)環(huán)境，基于高德地圖豐富的JavaScript API開發(fā)代碼設(shè)計(jì)與開發(fā)公交查詢系統(tǒng)項(xiàng)目，項(xiàng)目完成后能實(shí)現(xiàn)城市切換、公交路線查詢和換乘方案查詢的一系列功能，讓學(xué)生體現(xiàn)到程序語言的真正作用和價(jià)值。

1項(xiàng)目開發(fā)環(huán)境與開發(fā)步驟設(shè)計(jì)

1.1項(xiàng)目開發(fā)環(huán)境

高德地圖是由高德軟件有限公司開發(fā)的一款集數(shù)字地圖內(nèi)容、導(dǎo)航和位置服務(wù)解決方案于一體的綜合地圖平臺(tái)，是國內(nèi)三大常用地圖之一。對(duì)于職校的學(xué)生，高德地圖認(rèn)知度很高，而且使用率很廣，深得學(xué)生喜愛。但是，作為地圖開發(fā)者的身份，對(duì)于學(xué)生是神秘而又有趣的，能充分激發(fā)學(xué)生的自主學(xué)習(xí)興趣，有利于項(xiàng)目在教學(xué)中的應(yīng)用。

基于高德地圖開發(fā)公交查詢系統(tǒng)項(xiàng)目主要應(yīng)用了高德地圖開放平臺(tái)提供的JavaScript API程序，結(jié)合JavaScfipt語言的基礎(chǔ)語法和各種對(duì)象的調(diào)用方式，利用Dreamweaver或sumlime Text等軟件來開發(fā)Web應(yīng)用程序。

API是各種網(wǎng)絡(luò)地圖廠家提供的地圖嵌入到網(wǎng)頁的應(yīng)用程序接口，高德地圖針對(duì)網(wǎng)頁的API主要由JavaScript語言編寫，提供給開發(fā)者網(wǎng)站或移動(dòng)端中構(gòu)建功能豐富、交互性強(qiáng)的地圖應(yīng)用程序，例如地點(diǎn)搜索、路線規(guī)劃、定位等功能，對(duì)于學(xué)生的學(xué)習(xí)有很大的幫助。

1.2項(xiàng)目開發(fā)步驟設(shè)計(jì)

結(jié)合項(xiàng)目涉及知識(shí)點(diǎn)和學(xué)生的認(rèn)知能力，筆者把項(xiàng)目分解成三個(gè)步驟進(jìn)行開發(fā)，見圖1項(xiàng)目開發(fā)步驟設(shè)計(jì)圖。首先是地圖功能開發(fā)部分，從注冊(cè)高德地圖成為開發(fā)者到在自己的網(wǎng)頁中調(diào)用地圖，實(shí)現(xiàn)地圖初始化，讓學(xué)生感受到JavaScript語言的作用和價(jià)值；第二步，公交查詢功能的開發(fā)是本項(xiàng)目的重點(diǎn)和難點(diǎn)，要求學(xué)生掌握J(rèn)avaScript語言的調(diào)用和查詢功能，體會(huì)程序的實(shí)際應(yīng)用；第三步，對(duì)項(xiàng)目進(jìn)行調(diào)試與開發(fā)，要求學(xué)生把網(wǎng)頁安裝到服務(wù)器中進(jìn)行調(diào)試，并進(jìn)行分組互相測試，編寫測評(píng)報(bào)告，對(duì)項(xiàng)目提出用戶體驗(yàn)和修改建議。

本項(xiàng)目的步驟設(shè)計(jì)遵循由淺至深，層層遞進(jìn)，逐步完善的效果進(jìn)行，讓學(xué)生先得到程序的實(shí)惠和樂趣，再通過自行開發(fā)體現(xiàn)編程的價(jià)值，從被動(dòng)學(xué)習(xí)到主動(dòng)學(xué)習(xí)。在開發(fā)過程中，通過分組探討，分組協(xié)作，分組測評(píng)的方式，讓同學(xué)們從開發(fā)者的角度協(xié)同工作，又可以從用戶的角度評(píng)價(jià)項(xiàng)目，實(shí)現(xiàn)相互學(xué)習(xí)，共同進(jìn)步。

根據(jù)用戶輸入的乘車起點(diǎn)和目的站，在進(jìn)行查詢操作時(shí)會(huì)調(diào)用高德地圖API中的getElementsByName函數(shù)，通過地圖自身的算法篩選出距離最短，換乘最少，時(shí)間最短的乘車方案。

在網(wǎng)頁中添加兩個(gè)文本輸入框用用于輸人起點(diǎn)和終點(diǎn)，添加一個(gè)按鈕用于顯示換乘信息。當(dāng)點(diǎn)擊按鈕時(shí)獲取輸入的信息并顯示換乘信息，代碼見表3。

3結(jié)束語

JavaScript語言編程的開發(fā)是職業(yè)院?！毒W(wǎng)頁編程》課程中的重要組成部分，基于高德地圖開發(fā)公交查詢系統(tǒng)項(xiàng)目循序漸進(jìn)，有趣而又實(shí)用，能有效地激發(fā)學(xué)生自主學(xué)習(xí)的興趣，項(xiàng)目在實(shí)際應(yīng)用中體現(xiàn)的價(jià)值能讓學(xué)生立起強(qiáng)大的信心和學(xué)習(xí)動(dòng)力。項(xiàng)目完成后，學(xué)生能奠定網(wǎng)絡(luò)編程語言的基礎(chǔ)，逐步實(shí)現(xiàn)根據(jù)實(shí)際需要自主設(shè)計(jì)與開發(fā)項(xiàng)目，把知識(shí)技能轉(zhuǎn)化成生產(chǎn)力，有利于今后向更深層次的知識(shí)學(xué)習(xí)，并開發(fā)出自主創(chuàng)新的項(xiàng)目。

公交查詢系統(tǒng)項(xiàng)目除了結(jié)合JavaScript語言進(jìn)行編程以外，還可以加入HTML5、CSS、C#等編程語言進(jìn)行項(xiàng)目模塊開發(fā)，既豐富教學(xué)內(nèi)容，又提高教學(xué)效率。如何做到一個(gè)項(xiàng)目串聯(lián)各種編程語言的學(xué)習(xí)將是下一步需要重點(diǎn)研究和解決的問題。