基于Hbuilder技術(shù)的網(wǎng)頁(yè)地圖制作

實(shí)踐活動(dòng)題目基于Hbuilder技術(shù)的網(wǎng)頁(yè)地圖制作一、實(shí)踐目的1.素養(yǎng)提升（1）心智訓(xùn)練提高了自我學(xué)習(xí)的能力，鍛煉個(gè)人素質(zhì)，獨(dú)立編寫(xiě)代碼，并生成網(wǎng)頁(yè)。制作出自己喜歡的網(wǎng)頁(yè)，實(shí)現(xiàn)了現(xiàn)階段的自我夢(mèng)想。（2）熟悉并熟練的完成代碼編寫(xiě)，利用現(xiàn)有知識(shí)實(shí)現(xiàn)自己腦海中的想法。通過(guò)本學(xué)期短學(xué)期的學(xué)習(xí)，極大地提高了我對(duì)計(jì)算機(jī)的認(rèn)識(shí)和理解，對(duì)網(wǎng)頁(yè)制作有了更深層次的認(rèn)識(shí)，并且在數(shù)據(jù)整理分析方面的能力極大的提高了，在運(yùn)用網(wǎng)頁(yè)制作的同時(shí)，自學(xué)了解統(tǒng)計(jì)學(xué)知識(shí)整理分析數(shù)據(jù)，進(jìn)而運(yùn)用到網(wǎng)頁(yè)制作的過(guò)程中。課堂上，書(shū)本上的知識(shí)唯有在自己實(shí)踐之后方知學(xué)到了多少，只有實(shí)踐才能將知識(shí)深深的印在腦中，才能利用這些知識(shí)儲(chǔ)備解決將來(lái)在工作生活中遇到的問(wèn)題。2.加強(qiáng)創(chuàng)新精神作為新時(shí)代的大學(xué)生，我們應(yīng)該有獨(dú)立自主的實(shí)踐能力，強(qiáng)化動(dòng)手操作，實(shí)踐出真諦，只有在實(shí)踐之后才知道自己的不足。在習(xí)總書(shū)記的中國(guó)夢(mèng)的號(hào)召下，我們大學(xué)生更應(yīng)該具有創(chuàng)新精神，富有想象力，將我們腦海中的想法實(shí)現(xiàn)出來(lái)，為了中華民族的偉大復(fù)興努力奮斗，創(chuàng)新精神是當(dāng)代人民所必備的，是實(shí)現(xiàn)中國(guó)夢(mèng)必須條件。3.培養(yǎng)個(gè)人動(dòng)手操作能力學(xué)習(xí)書(shū)本知識(shí)，理論聯(lián)系實(shí)際，制作新的網(wǎng)頁(yè)，提高動(dòng)手能力，優(yōu)化網(wǎng)頁(yè)內(nèi)容，將短學(xué)期所學(xué)知識(shí)與實(shí)際問(wèn)題相結(jié)合，充實(shí)大腦，拓寬未來(lái)的學(xué)習(xí)思路，翻閱資料，完成本次的網(wǎng)頁(yè)制作。二、實(shí)踐內(nèi)容1.實(shí)踐成果的作業(yè)課題設(shè)計(jì)便攜的網(wǎng)頁(yè)地圖能夠使人清楚的看到地圖上的一切，快速的尋找到想要尋找的地方。2.網(wǎng)頁(yè)主題的設(shè)計(jì)近年來(lái)，隨著電腦，手機(jī)的普及，網(wǎng)絡(luò)數(shù)據(jù)越來(lái)越多，智能商品全民化已經(jīng)成為一種趨勢(shì)。僅僅使用手機(jī)或電腦就能實(shí)現(xiàn)，為了人們方便實(shí)用，我們制作成網(wǎng)頁(yè)形式，可以簡(jiǎn)單快捷的打開(kāi)使用，查找每個(gè)地方所在之處。隨著支付寶公益的興起，步行捐越來(lái)越流行，網(wǎng)絡(luò)地圖上走路，走完全程即可獲得相應(yīng)的分?jǐn)?shù)，達(dá)到一定分?jǐn)?shù)后可以為貧困地區(qū)捐贈(zèng)一個(gè)足球場(chǎng)。因此基于這個(gè)活動(dòng)，為了實(shí)踐所學(xué)到的知識(shí)，我學(xué)習(xí)制作了中國(guó)地圖，詳細(xì)到可以放大縮小。3.網(wǎng)頁(yè)中的信息材料的搜集主要在網(wǎng)站中收集所需要的資料，在查閱書(shū)籍補(bǔ)充知識(shí)點(diǎn)盲區(qū)，文字、相關(guān)新聞消息，地理位置，經(jīng)緯度，面積大小，氣候溫度等都是需要收集的。收集過(guò)后運(yùn)用統(tǒng)計(jì)知識(shí)加以整理分析，在咨詢相關(guān)地理老師精準(zhǔn)定位，取其精華、棄其糟粕，加以更加精美的網(wǎng)頁(yè)優(yōu)化后，初步形成了所制作的網(wǎng)頁(yè)地圖。同時(shí)，查詢有關(guān)的書(shū)籍，提取圖片，影像，使所作網(wǎng)頁(yè)更加完善，更加具有說(shuō)服力。要想把網(wǎng)頁(yè)做的更好，就要更多的搜集材料，手機(jī)的越多，越具體，網(wǎng)頁(yè)就會(huì)做的更好。4.網(wǎng)頁(yè)制作工具Hbuilder，visualstudiocode以及其他優(yōu)化軟件三、實(shí)踐過(guò)程1.主界面的設(shè)計(jì)主界面使用一個(gè)<div>標(biāo)簽再結(jié)合CSS樣式表確定一個(gè)基本大小，構(gòu)成整個(gè)網(wǎng)頁(yè)的主體部分。使用響應(yīng)式布局，網(wǎng)頁(yè)能夠隨著設(shè)備的不同，自動(dòng)調(diào)整大小形狀。CSS也被稱為級(jí)聯(lián)樣式表，它的英文的全名為：CascadingStyleSheets，它是一種用來(lái)顯示標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用(也就是HTML)或者標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集(也就是XML)等樣式的計(jì)算機(jī)語(yǔ)言。CSS可以是靜態(tài)地修飾網(wǎng)頁(yè)，而且也可以通過(guò)配合腳本語(yǔ)言，從而實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)各個(gè)元素動(dòng)態(tài)化的進(jìn)行格式化內(nèi)容。CSS還能夠?qū)W(wǎng)頁(yè)中各個(gè)元素位置的排版進(jìn)行像素級(jí)的精確控制，它幾乎支持所有的字體字號(hào)樣式，同時(shí)擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。HTML是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言，HTML指的是超文本標(biāo)記語(yǔ)言，他不是一種編程語(yǔ)言，他也不是一種描述性的語(yǔ)言，而是一種標(biāo)記語(yǔ)言，標(biāo)記語(yǔ)言是屬于一套標(biāo)記標(biāo)簽，所以HTML使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)。2.地圖的構(gòu)建：由于地圖構(gòu)建需要一定的地理知識(shí)，有些未知的區(qū)域還要實(shí)地測(cè)繪，為了簡(jiǎn)化制作過(guò)程，本次設(shè)計(jì)采用百度開(kāi)源的百度地圖的免費(fèi)API接口，進(jìn)行地圖的獲取，使用javascript技術(shù)，然后再加以自己申請(qǐng)的token令牌即可獲取到全國(guó)的地圖。JavaScript是一種直接翻譯式腳本語(yǔ)言，是一種弱類(lèi)型、動(dòng)態(tài)類(lèi)型、基于原型的語(yǔ)言，內(nèi)置很多支持類(lèi)型。它的解釋器被稱為JavaScript引擎，是瀏覽器的一部分，廣泛的運(yùn)用于客戶端的腳本語(yǔ)言，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）網(wǎng)頁(yè)上使用，是用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能的一種應(yīng)用。3.捕獲鼠標(biāo)動(dòng)作使用javascript，使用內(nèi)嵌在html頁(yè)面中的js腳本來(lái)捕獲用戶的鼠標(biāo)動(dòng)作。本次就只捕獲了兩個(gè)鼠標(biāo)動(dòng)作，此時(shí),只有兩個(gè)鼠標(biāo)操作被捕獲,這是鼠標(biāo)滾輪的向上滑動(dòng)和向下滑動(dòng)鼠標(biāo)滾輪。使用onmouseover和onmouseout事件處理程序改變圖像的顯示方式。要做到這一點(diǎn)，當(dāng)鼠標(biāo)進(jìn)入圖像區(qū)域后，可以利用onmouseOver改變<img>元素中的src屬性，當(dāng)鼠標(biāo)離開(kāi)時(shí)，利用onmouseOut再把這個(gè)屬性修改回去，當(dāng)然這種圖像變換方式完全可以用CSS來(lái)實(shí)現(xiàn)，在這里只是說(shuō)明一下onmouseOver和onmouseOut事件處理的用法，后面遇到的實(shí)際問(wèn)題還需要我們重新解決。4.捕獲鼠標(biāo)動(dòng)作給予響應(yīng)的頁(yè)面響應(yīng)當(dāng)使用者進(jìn)行鼠標(biāo)滾輪操作之后，使用HTML內(nèi)嵌的js腳本捕獲到該動(dòng)作之后，頁(yè)面響應(yīng)響應(yīng),由動(dòng)作綁定的事件響應(yīng)函數(shù)立即響應(yīng)完成變焦和變焦圖5.網(wǎng)頁(yè)地圖中的字體變化過(guò)程也是一個(gè)十分重要的視覺(jué)元素，它必須經(jīng)過(guò)精心的計(jì)劃，才能顯示出更好的狀態(tài)。字體的使用要求具有活潑、多樣、生動(dòng)的形象。字體顏色的選擇、字在網(wǎng)頁(yè)中的位置、字所構(gòu)成的圖形等等都是可以改變的因素，最終選擇哪種形式，還應(yīng)該與網(wǎng)頁(yè)地圖內(nèi)容、色彩以及表現(xiàn)形式等結(jié)合起來(lái)。6.因?yàn)槿绻粋€(gè)全局變量是在函數(shù)引用,則執(zhí)行由相關(guān)的外部可變影響使用功能的通用性降低。如果將一個(gè)函數(shù)使用到另一個(gè)文件中，因?yàn)檫€要考慮把有關(guān)的外部變量和它的值一起轉(zhuǎn)移過(guò)去。但是如果該外部變量與其他文件的變量有相同的名字時(shí)，就會(huì)出現(xiàn)問(wèn)題，這就是降低了程序的可靠性和通用性。在程序設(shè)計(jì)時(shí)，在劃分模塊時(shí)要求模塊的“內(nèi)聚性”強(qiáng)，與其他模塊的“耦合性”很弱。它與其他模塊相互影響要盡可能的少，而且全局變量是不符合這個(gè)原則的。四、實(shí)踐體會(huì)在這段時(shí)間里，我已經(jīng)較為深入細(xì)微地了解了網(wǎng)站整體的策劃、設(shè)計(jì)與實(shí)現(xiàn)等步驟。在網(wǎng)頁(yè)設(shè)計(jì)方面，因?yàn)槲抑霸谧鲭S堂作業(yè)時(shí)略微了解過(guò)，所以在本次網(wǎng)頁(yè)設(shè)計(jì)之前，我在比較短的時(shí)間內(nèi)迅速的對(duì)MicrosoftVisualStudio做了十分仔細(xì)地復(fù)習(xí)回顧，鞏固了之前所學(xué)到的知識(shí)以及以前遺忘的內(nèi)容，在剛開(kāi)始的網(wǎng)頁(yè)設(shè)計(jì)時(shí)，我就可以很快的上手對(duì)網(wǎng)站的界面進(jìn)行初步設(shè)計(jì)。在具體設(shè)計(jì)時(shí)，我考慮到網(wǎng)頁(yè)的整體表現(xiàn)形式和使用者看到的主觀感受，因此我使用表格、框架、圖片來(lái)優(yōu)化頁(yè)面，所以也得到了比較滿意的效果。因?yàn)镠builder的主要功能是web前端的開(kāi)發(fā)軟件，也就是網(wǎng)頁(yè)制作的軟件，經(jīng)過(guò)這次短暫的實(shí)訓(xùn)，我了解到，在網(wǎng)頁(yè)制作的過(guò)程中，細(xì)心是最基本的原則，尤其是在敲寫(xiě)代碼的過(guò)程中，一個(gè)細(xì)微的錯(cuò)誤都會(huì)導(dǎo)致整篇代碼無(wú)法運(yùn)行，為此我也吃了不少苦頭，甚至有時(shí)為了找到問(wèn)題而重新翻閱整篇代碼，不僅浪費(fèi)時(shí)間，而且更容易出錯(cuò)。為此我認(rèn)識(shí)到要想減少失誤的概率，首先就是要在編寫(xiě)代碼前明確主題內(nèi)容，并全程圍繞此主題展開(kāi)；其次，要設(shè)身處地的考慮用戶的感受，將自己化身成為作品的用戶，思考在使用的時(shí)候會(huì)有哪些不便和不足，以此作為之后首要攻克的目標(biāo)；最后，一定要注意優(yōu)化內(nèi)容，在版式，框架等的安排上不僅要注重用戶的體驗(yàn)，還要強(qiáng)調(diào)實(shí)用型，這樣才會(huì)吸引更多人的目光。通過(guò)半個(gè)月對(duì)Hbuilder的學(xué)習(xí)以及使用，我感受到了許多之前未曾學(xué)習(xí)到的東西，雖然學(xué)習(xí)的時(shí)間飛逝而過(guò)，但是讓我學(xué)到了很多平時(shí)在學(xué)習(xí)生活中學(xué)不到的知識(shí)，使得我的大學(xué)校園生活得到了提升，升華。因此，我深刻感受到夏季短學(xué)期的重要性，讓我學(xué)會(huì)了如何去用Hbuilder創(chuàng)建并制作網(wǎng)頁(yè)，讓我學(xué)到了作為一名網(wǎng)頁(yè)制作者如何讓使用者和閱讀者的可以感受到的思想，更讓我學(xué)會(huì)了如何通過(guò)自己的雙手來(lái)實(shí)現(xiàn)一件不可能實(shí)現(xiàn)的事情。通過(guò)這次的實(shí)踐活動(dòng)，仿佛讓我找到了新的方向，曾經(jīng)在一本書(shū)上看到說(shuō)：“不論是棲息于泥水，還是棲息于清水，只要不斷向前游，終究會(huì)成長(zhǎng)為美麗的魚(yú)”。學(xué)習(xí)也是如此，從古至今的中國(guó)人都說(shuō)過(guò)“成大事者，必先得天時(shí)、地利、人和”。但天賦之才若不經(jīng)歷歲月的打磨，便與常人無(wú)異；而占盡地利之人早晚也會(huì)將自然饋贈(zèng)的資源消磨殆盡，唯有個(gè)人不斷地努力才能是自己一躍而起，羨煞天縱之才。從剛開(kāi)始的瀏覽網(wǎng)頁(yè)，到根據(jù)老師所講的，書(shū)本上學(xué)的制作網(wǎng)頁(yè)。在為期兩周的短學(xué)期學(xué)習(xí)中，從對(duì)網(wǎng)頁(yè)制作的一無(wú)所知，到現(xiàn)在可以初步掌握網(wǎng)頁(yè)制作的流程，可以說(shuō)收獲很多。這是新接觸的知識(shí)，也是新的能力掌握，之前只知道使用網(wǎng)頁(yè)上現(xiàn)有的地圖、手機(jī)APP中的導(dǎo)航軟件，現(xiàn)在可以根據(jù)自己所學(xué)到的知識(shí)制作簡(jiǎn)單的網(wǎng)頁(yè)地圖。才知道在互聯(lián)網(wǎng)高速發(fā)展的今天，數(shù)據(jù)已成為信息時(shí)代的財(cái)富，電子大數(shù)據(jù)時(shí)代已經(jīng)成為重中之重，人們對(duì)于網(wǎng)絡(luò)的需求也越來(lái)越多，要求也越來(lái)越多，人們出門(mén)導(dǎo)航已經(jīng)成為必備品，網(wǎng)頁(yè)地圖更是需要更加精準(zhǔn)。因此，如果可以熟練掌握網(wǎng)頁(yè)的制作，掌握網(wǎng)頁(yè)地圖的制作方法為以后制作更加詳細(xì)的地圖是十分重要的。對(duì)于現(xiàn)如今計(jì)算機(jī)網(wǎng)絡(luò)大時(shí)代來(lái)說(shuō)，就更加重要了。處于大數(shù)據(jù)時(shí)代的今天，我們不能再因?yàn)檎莆詹涣藬?shù)據(jù)而落伍。在當(dāng)今社會(huì)中，數(shù)據(jù)就是我們寶貴的財(cái)富，只有學(xué)好本領(lǐng)，及時(shí)了解網(wǎng)絡(luò)上的信息、數(shù)據(jù)，我們才能更好的發(fā)展。學(xué)習(xí)網(wǎng)頁(yè)制作也成為了必備技能之一，網(wǎng)頁(yè)現(xiàn)在是人們的交流工具，網(wǎng)頁(yè)的好壞在乎這人與人之間的交流與溝通，它也能讓人們清楚的看到我們想表達(dá)的東西，直觀清晰的看出當(dāng)今社會(huì)的發(fā)展趨勢(shì)和時(shí)尚潮流，這樣才能更加充實(shí)自己，提高自己。在網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中我也遇到了很多的問(wèn)題，最后通過(guò)去圖書(shū)館查閱書(shū)籍資料，上網(wǎng)百度，請(qǐng)教老師同學(xué)等方式，不斷地學(xué)習(xí)知識(shí)，解決，提高，設(shè)計(jì)出的網(wǎng)頁(yè)從外觀，內(nèi)容上都在不斷地進(jìn)步，提高。在不斷的實(shí)踐過(guò)程中，網(wǎng)頁(yè)制作的水平得到了極大的提高。所以也總結(jié)出了以下的經(jīng)驗(yàn)：學(xué)習(xí)到理論知識(shí)后，一定要實(shí)踐，從實(shí)踐中分析問(wèn)題，解決問(wèn)題。關(guān)于網(wǎng)頁(yè)制作的書(shū)籍太多了，看書(shū)不宜太多，看一本就足夠了。每一本書(shū)中的內(nèi)容過(guò)多而且側(cè)重點(diǎn)都不同，看的太多就會(huì)歸于凌亂，花的時(shí)間也會(huì)增加很多。初學(xué)者必須清楚的知道網(wǎng)頁(yè)制作的基本流程，也就是第一步要干什么，第二步要干什么等等，只要知道了這些，就可以大膽的去實(shí)踐，在實(shí)際運(yùn)用過(guò)程中遇到問(wèn)題后在一一查資料解決，這樣會(huì)讓我們更加清楚的知道我們所欠缺的知識(shí)，以便以后更好的補(bǔ)充知識(shí)點(diǎn)。不要等到學(xué)會(huì)所有的制作軟件后再去實(shí)現(xiàn)，這樣會(huì)大大的降低學(xué)習(xí)效率，應(yīng)該邊學(xué)邊嘗試。大概了解代碼的含義后，在平時(shí)上網(wǎng)時(shí)多留意別人制作的網(wǎng)頁(yè)效果，細(xì)心觀察，留意別人的設(shè)計(jì)精妙之處，在我們后面的制作中肯定會(huì)使用得到。編寫(xiě)代碼是一個(gè)仔細(xì)活，我們應(yīng)該認(rèn)認(rèn)真真的在腦中設(shè)計(jì)出整體，然后在仔仔細(xì)細(xì)的編寫(xiě)代碼，加入自己的靈感，使自己制作的網(wǎng)頁(yè)美觀得體。在這次短暫的學(xué)習(xí)之后，讓我更加深刻的感受到了計(jì)算機(jī)的魅力所在，我深深的喜歡著大數(shù)據(jù)時(shí)代帶給人們的便捷與高效?；ヂ?lián)網(wǎng)的普及讓全世界人們的距離近在咫尺，它是我們與其他國(guó)家人民溝通的橋梁與紐帶。一個(gè)精巧的網(wǎng)頁(yè)會(huì)展現(xiàn)一個(gè)人的個(gè)人魅力，他會(huì)生動(dòng)形象的展示出我們的特點(diǎn)。因此，學(xué)習(xí)好網(wǎng)頁(yè)設(shè)計(jì)在以后的生活和工作中將給我們帶來(lái)無(wú)限的驚喜。五．附錄核心代碼<!DOCTYPEhtml><htmlstyle="height:100%"><head><metacharset="utf-8"></head><bodystyle="height:100%;margin:0"><divid="container"style="height:100%"></div><scripttype="text/javascript"src="/gallery/vendors/echarts/echarts.min.js"></script><scripttype="text/javascript"src="/gallery/vendors/echarts-gl/echarts-gl.min.js"></script><scripttype="text/javascript"src="/gallery/vendors/echarts-stat/ecStat.min.js"></script><scripttype="text/javascript"src="/gallery/vendors/echarts/extension/dataTool.min.js"></script><scripttype="text/javascript"src="/gallery/vendors/echarts/map/js/china.js"></script><scripttype="text/javascript"src="/gallery/vendors/echarts/map/js/world.js"></script><scripttype="text/javascript"src="/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script><scripttype="text/javascript"src="/gallery/vendors/echarts/extension/bmap.min.js"></script><scripttype="text/javascript"src="/gallery/vendors/simplex.js"></script><scripttype="text/javascript">vardom=document.getElementById("container");varmyChart=echarts.init(dom);varapp={};option=null;app.title='網(wǎng)頁(yè)地圖';$.get(ROOT_PATH+'data/asset/data/hangzhou-tracks.json',function(data){varlines=data.map(function(track){return{coords:track.map(function(seg,idx){returnseg.coord;})};});myChart.setOption(option={bmap:{center:[12030.240018034923],zoom:14,roam:true,mapStyle:{styleJson:[{'featurhfgheType':'water','elementTdgsype':'all','stylerers':{'color':'#d1d1d1'}},{'featurgfeType':'land','elemenfdtType':'all','stylers':{'color':'#f3f3f3'}},{'featurdfeType':'railway','elemefdvntType':'all','stylekjrs':{'visibility':'off'}},{'featurnheType':'highway','elementkuType':'all','stylers':{'color':'#fdfdfd'}},{'featukuyreType':'highway','elemewglntType':'labels','stylemvrs':{'visibility':'off'}},{'featuwureType':'arterial','elementType':'geometry','stylers':{'color':'#fefefe'}},{'featureType':'arterial','elemenmkltType':'geometry.fill','stylers':{'color':'#fefhefe'}},{'feartureType':'poi','elemedntType':'all','stylesrs':{'visibiclity':'off'}},{'featurbyeType':'green','elemenwtType':'all','stylmiers':{'visibility':'off'}},{'featiureType':'subway','e