today I'm going to introduce in practice, how to load the data into the map. In this paper, combining with the instance, using PHP + Mysql + jQuery map of China provinces data statistics results.

this example using statistical active users of a product in each of the provinces as the background, data from a mysql database, according to the active users of each province is divided into different levels, and in a different background color display provinces activity, can meet the demand of practical application.


in the first place in the head part load the Raphael. The js library files and chinamapPath js file path information.

<The script type="text/javascript" SRC="" ></script><The script type="text/javascript" SRC="" ></script><The script type="text/javascript" SRC="" ></script>

then placed inside the body needs to map the location of the place div #map.

<Div id="map" ></div>


we are preparing a mysql table named mapdata, stored in this table is the product in the provinces of active user data. We use PHP to read data in a mysql table, and reads the data in json format output, and the PHP file named json. PHP.

$host="localhost";//host$db_user="root";//database user name$db_pass="";//password$db_name="demo";//the name of the database$link=mysql_connect ($host, $db_user, $db_pass);//connect to the databaseThe mysql_select_db ($db_name, $link);Mysql_query (" SET names UTF8 ");$SQL="select active from mapdata order by id asc";//query$query=mysql_query ($SQL);While ($row=mysql_fetch_array ($query)) {$arr=$row [] [] 'active';}Echo json_encode ($arr);//the JSON formatMysql_close ($link);//close the connection

it is important to note that we need to get the mapdata table of each province in the sorting and chinamapPath. Js file the provinces in the order is consistent, which ensures that can read data and the corresponding map in the provinces.


First we use jquery

get () method to obtain the json data.

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

get the json data, we should first converts json data array, and then we traverse the entire array, according to the province of active users in the json data, we make a hierarchy, here I will is divided into six grade 0 to 5 grade, the larger the number of active users the background color of the deep, so displayed on the map will be clear at a glance of see the data level degree of different provinces.

please arrange good code:

$(function () {$.get (" json. PHP ", function (json) {//get the dataVar data= (json);//conversion arrayVar flag;Var arr=new Array ();//define a new array, the corresponding levelFor (var I=0; I =100 &&d) {Flag=1;} else if (d <2000>=500 &&d) {Flag=2;} else if (d <5000>=2000 &&d) {Flag=3;} else if (d <10000>=5000 &&d) {Flag=4;} else {Flag=5;}Arr. Push (flag);}//define colorVar colors=[" #d7eef8 ", "#97 d6f5", "#3 fbeef", "#00 a2e9", "#0084", "#005 c86"].//call mapping methodVar R=Raphael (" map ", 600, 500);PaintMap (R);Var textAttr={"Fill", "#000","The font - size" : "12px","Cursor" : "pointer"};Var I=0;For (var state in China) {China [state] [' path ']. Color=Raphael. The getColor (0.9);(function (st, state) {//get the current graphic center coordinatesVar xx=st. getBBox () + x (st. getBBox (). The width/2);Var yy=st. getBBox (.) y + (st. getBBox (). The height/2);//modify some map text offset coordinatesThe switch (China [state] [' name ']) {Case "jiangsu" :Xx +=5;Yy -=10;Break;Case "hebei" :Xx -=10;Yy +=20;Break;A case of "tianjin" :Xx +=10;Yy +=10;Break;A case of "Shanghai" :Xx +=10;Break;A case of "guangdong" :Yy -=10;Break;A case of "Macao" :Yy +=10;Break;Case "Hong Kong" :Xx +=20;Yy +=5;Break;Case "gansu" :Xx -=40;Yy -=30;Break;Case "shaanxi" :Xx +=5;Yy +=10;Break;A case of "Inner Mongolia" :Xx -=15;Yy +=65;Break;Default:}//write textChina [state] [' text ']=R.t ext (xx, yy, China [state] [' name ']). The attr (textAttr);Var fillcolor=colors [arr [I]].//get the corresponding colorSt. attr ({the fill: fillcolor});//fill the background colorSt [0]. Onmouseover=function () {St. the animate ({the fill: "#FDD, stroke:" #eee "}, 500);China [state] [' text '] toFront ();R.s afari ();};St [0]. Onmouseout=function () {St. the animate ({the fill: fillcolor, stroke: "#eee"}, 500);China [state] [' text '] toFront ();R.s afari ();};}) (China [state] [' path '], state);I++;}});});

the above code, using var fillcolor=colors [arr [I]]. To obtain corresponding levels of color value, and then through st. attr ({the fill: fillcolor}); Color fill in the province to the corresponding block. In addition string2Array is () function converts a string to an array.

The function string2Array (string) {The eval (" var result="+ decodeURI (string));Return the result.} 

through the above steps, we can see a map of China different provinces and different background color, according to the number of active users of different colors to distinguish between provinces between degree of difference, the desired goal, friends hope this article will be helpful to everyone's learning.

This concludes the body part