怎么用PHP+Mysql+jQuery實(shí)現(xiàn)地圖區(qū)域數(shù)據(jù)統(tǒng)計(jì)

這篇文章主要介紹“怎么用PHP+Mysql+jQuery實(shí)現(xiàn)地圖區(qū)域數(shù)據(jù)統(tǒng)計(jì)”，在日常操作中，相信很多人在怎么用PHP+Mysql+jQuery實(shí)現(xiàn)地圖區(qū)域數(shù)據(jù)統(tǒng)計(jì)問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用PHP+Mysql+jQuery實(shí)現(xiàn)地圖區(qū)域數(shù)據(jù)統(tǒng)計(jì)”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

本例以統(tǒng)計(jì)某產(chǎn)品在各省份的活躍用戶數(shù)為背景，數(shù)據(jù)來源于mysql數(shù)據(jù)庫，根據(jù)各省份的活躍用戶數(shù)，分成不同等級，并以不同的背景色顯示各省份的活躍程度，符合實(shí)際應(yīng)用需求。

HTML

和本站上篇文章使用raphael.js繪制中國地圖一樣，首先在head部分載入raphael.js庫文件和chinamapPath.js路徑信息文件。

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="raphael.js"></script> <script type="text/javascript" src="chinamapPath.js"></script>

然后在body中需要放置地圖的位置放置p#map。

<p id="map"></p>

PHP

我們準(zhǔn)備一張mysql表名為mapdata，這張表存儲的是產(chǎn)品在各個(gè)省份的活躍用戶數(shù)據(jù)。我們使用PHP讀取mysql表中的數(shù)據(jù)，并將讀取的數(shù)據(jù)以json格式輸出，并將PHP文件命名為json.php。

$host="localhost";//主機(jī) $db_user="root";//數(shù)據(jù)庫用戶名 $db_pass="";//密碼 $db_name="demo";//數(shù)據(jù)庫名稱 $link=mysql_connect($host,$db_user,$db_pass);//連接數(shù)據(jù)庫 mysql_select_db($db_name,$link); mysql_query("SET names UTF8"); $sql = "select active from mapdata order by id asc";//查詢 $query = mysql_query($sql); while($row=mysql_fetch_array($query)){ $arr[] = $row['active']; } echo json_encode($arr);//JSON格式 mysql_close($link);//關(guān)閉連接

值得注意的是，我們要把mapdata表中各省份的排序與chinamapPath.js文件中的各省份順序一致，這樣才能保證讀取的數(shù)據(jù)能和地圖中的省份對應(yīng)上。

jQuery

首先我們使用jquery的get()方法獲取json數(shù)據(jù)。

$(function(){ $.get("json.php",function(json){    ...    }); });

獲取到j(luò)son數(shù)據(jù)后，我們先要將json數(shù)據(jù)轉(zhuǎn)換為數(shù)組，然后我們遍歷整個(gè)數(shù)組，根據(jù)json數(shù)據(jù)中各省份活躍用戶數(shù)的多少，我們作一個(gè)等級區(qū)分，這里我將等級分為0-5六個(gè)等級，活躍用戶數(shù)越大背景顏色越深，這樣在地圖上顯示就會一目了然的看出不同省份的數(shù)據(jù)等級程度。繪制地圖的時(shí)候和本站上篇文章使用raphael.js繪制中國地圖介紹的基本一樣，不同之處在于給每個(gè)不同省份填充對應(yīng)的顏色，請看整理好的代碼：

$(function(){ $.get("json.php",function(json){//獲取數(shù)據(jù) var data = string2Array(json);//轉(zhuǎn)換數(shù)組 var flag; var arr = new Array();//定義新數(shù)組，對應(yīng)等級 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"];     //調(diào)用繪制地圖方法    var R = Raphael("map", 600, 500);    paintMap(R); var textAttr = {        "fill": "#000",        "font-size": "12px",        "cursor": "pointer"    };    var i=0;    for (var state in china) { china[state]['path'].color = Raphael.getColor(0.9);        (function (st, state) { //獲取當(dāng)前圖形的中心坐標(biāo)            var xx = st.getBBox().x + (st.getBBox().width / 2);            var yy = st.getBBox().y + (st.getBBox().height / 2);            //修改部分地圖文字偏移坐標(biāo)            switch (china[state]['name']) {                case "江蘇":                    xx += 5;                    yy -= 10;                    break;                case "河北":                    xx -= 10;                    yy += 20;                    break;                case "天津":                    xx += 10;                    yy += 10;                    break;                case "上海":                    xx += 10;                    break;                case "廣東":                    yy -= 10;                    break;                case "澳門":                    yy += 10;                    break;                case "香港":                    xx += 20;                    yy += 5;                    break;                case "甘肅":                    xx -= 40;                    yy -= 30;                    break;                case "陜西":                    xx += 5;                    yy += 10;                    break;                case "內(nèi)蒙古":                    xx -= 15;                    yy += 65;                    break;                default:            } //寫入文字 china[state]['text'] = R.text(xx, yy, china[state]['name']).attr(textAttr); var fillcolor = colors[arr[i]];//獲取對應(yīng)的顏色 st.attr({fill:fillcolor});//填充背景色 st[0].onmouseover = function () {                st.animate({fill: "#fdd", stroke: "#eee"}, 500); china[state]['text'].toFront();                R.safari();            };            st[0].onmouseout = function () {                st.animate({fill: fillcolor, stroke: "#eee"}, 500); china[state]['text'].toFront();                R.safari();            };         })(china[state]['path'], state); i++;    } }); });

上述代碼中，使用var fillcolor = colors[arr[i]];獲取對應(yīng)等級的顏色值，然后通過st.attr({fill:fillcolor});將顏色填充到對應(yīng)的省份區(qū)塊中。此外string2Array()函數(shù)是將字符串轉(zhuǎn)換為數(shù)組。

function string2Array(string) { eval("var result = " + decodeURI(string)); return result; }

這樣，我們可以看到一個(gè)不同省份不同背景色的中國地圖，根據(jù)不同顏色可以區(qū)分省份之間的活躍用戶數(shù)差異程度，達(dá)到預(yù)期目標(biāo)。當(dāng)然實(shí)際項(xiàng)目需求會更復(fù)雜，Helloweba繼續(xù)會有文章介紹關(guān)于地圖數(shù)據(jù)統(tǒng)計(jì)的講解，下一期我們關(guān)注地圖交互，鼠標(biāo)滑向省份區(qū)域時(shí)顯示對應(yīng)省份的活躍用戶數(shù)值等相關(guān)信息，敬請關(guān)注。

到此，關(guān)于“怎么用PHP+Mysql+jQuery實(shí)現(xiàn)地圖區(qū)域數(shù)據(jù)統(tǒng)計(jì)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！