這篇文章主要講解了“怎么用PHP+jQuery實(shí)現(xiàn)地圖數(shù)據(jù)統(tǒng)計(jì)展示效果”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“怎么用PHP+jQuery實(shí)現(xiàn)地圖數(shù)據(jù)統(tǒng)計(jì)展示效果”吧!
創(chuàng)新互聯(lián)建站為企業(yè)級(jí)客戶提高一站式互聯(lián)網(wǎng)+設(shè)計(jì)服務(wù),主要包括成都做網(wǎng)站、網(wǎng)站制作、app開發(fā)定制、微信小程序定制開發(fā)、宣傳片制作、LOGO設(shè)計(jì)等,幫助客戶快速提升營(yíng)銷能力和企業(yè)形象,創(chuàng)新互聯(lián)各部門都有經(jīng)驗(yàn)豐富的經(jīng)驗(yàn),可以確保每一個(gè)作品的質(zhì)量和創(chuàng)作周期,同時(shí)每年都有很多新員工加入,為我們帶來大量新的創(chuàng)意。一款PHP+jQuery實(shí)現(xiàn)的中國(guó)地圖熱點(diǎn)數(shù)據(jù)統(tǒng)計(jì)展示實(shí)例,當(dāng)鼠標(biāo)滑動(dòng)到地圖指定省份區(qū)域,在彈出的提示框中顯示對(duì)應(yīng)省份的數(shù)據(jù)信息。
首先在頁(yè)面中加一個(gè)div#tip,用來展示地圖信息的提示框和#map用來生成地圖。
<div id="map"></div> <div id="tip"></div>
接著我們引入jQuery庫(kù)、raphael.js及chinamapPath.js(中國(guó)地圖數(shù)據(jù))
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="raphael.js"></script> <script type="text/javascript" src="chinamapPath.js"></script>
通過調(diào)用raphael繪制出中國(guó)地圖,然后載入統(tǒng)計(jì)數(shù)據(jù),由于地圖區(qū)塊小,我們不在地圖載入的時(shí)候就將數(shù)據(jù)顯示在地圖區(qū)塊上了,我們通過鼠標(biāo)交互實(shí)現(xiàn)將數(shù)據(jù)信息更好的展示給用戶。
當(dāng)鼠標(biāo)滑向省份區(qū)塊時(shí),通過e.clientX和e.clientY定位鼠標(biāo)坐標(biāo),然后通過jquery的css()方法定位提示框div#tip,并且將對(duì)應(yīng)省份的的名稱和活躍用戶數(shù)加到提示框里并展現(xiàn)出來,代碼如下:
$(function() { $.get("json.php", function(json) { var data = string2Array(json); var flag; var arr = new Array(); for (var i = 0; i < data.length; i++) { var d = data[i]; if (d < 100) { flag = 0; } else if (d >= 100 && d < 500) { flag = 1; } else if (d >= 500 && d < 2000) { flag = 2; } else if (d >= 2000 && d < 5000) { flag = 3; } else if (d >= 5000 && d < 10000) { flag = 4; } else { flag = 5; } arr.push(flag); } var colors = ["#d7eef8", "#97d6f5", "#3fbeef", "#00a2e9", "#0084be", "#005c86"]; var R = Raphael("map", 600, 500); //調(diào)用繪制地圖方法 paintMap(R); var i = 0; for (var state in china) { china[state]['path'].color = Raphael.getColor(0.9); (function(st, state) { var prodata = data[i]; var fillcolor = colors[arr[i]]; st.attr({ fill: fillcolor }); //填充背景色 xOffset = 70; yOffset = 180; st.hover(function(e) { st.animate({ fill: "#fdd", stroke: "#eee" }, 500); R.safari(); $("#tip").css({ "top": (e.clientY - xOffset) + "px", "left": (e.clientX - yOffset) + "px" }).fadeIn("fast").html("<h5>" + china[state]['name'] + "</h5><p>活躍用戶數(shù):" + prodata + "</p>"); }, function() { st.animate({ fill: fillcolor, stroke: "#eee" }, 500); R.safari(); $("#tip").hide(); }); st.mousemove(function(e) { $("#tip").css({ "top": (e.clientY - xOffset) + "px", "left": (e.clientX - yOffset) + "px" }); R.safari(); }); })(china[state]['path'], state); i++; } }); }); function string2Array(string) { eval("var result = " + decodeURI(string)); return result; }
感謝各位的閱讀,以上就是“怎么用PHP+jQuery實(shí)現(xiàn)地圖數(shù)據(jù)統(tǒng)計(jì)展示效果”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對(duì)怎么用PHP+jQuery實(shí)現(xiàn)地圖數(shù)據(jù)統(tǒng)計(jì)展示效果這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司,,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
網(wǎng)頁(yè)題目:怎么用PHP+jQuery實(shí)現(xiàn)地圖數(shù)據(jù)統(tǒng)計(jì)展示效果-創(chuàng)新互聯(lián)
文章地址:http://muchs.cn/article22/djgdcc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站排名、做網(wǎng)站、定制網(wǎng)站、虛擬主機(jī)、手機(jī)網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷推廣
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容