PHP and jquery Implementation map area data statistics show data sample

We want to show more information in the limited blocks on the map, and better to do it through the map interaction. This article will explain to you by sliding the mouse to the map designated province area, in the pop-up prompt box to display the corresponding province data information. Suitable for data statistics and map block display and other scenes

    HTML   First in the head part of the load Raphael.js library files and chinamappath.js path information file, this article does not repeat, the only difference is the need to add a div#tip in the body, to show the map information of the balloon.   Code as follows: <div id= "Map" ></div>  <div id= "Tip" ></div>      jQuery   By calling Raphael to draw a map of China, and then load statistics, because the map block small, we do not load in the map when the data displayed in the map block, we through the mouse interactive implementation of the data information to better display to the user. When the mouse moves to the province block, position the mouse coordinates through E.pagex and e.pagey, and then position the Cue box Div#tip via the jquery css () method, and add the name of the corresponding province and the number of active users to the cue box and show it, see Code:   Code as follows : $ (function () {      $.get ("json.php", Function (JSON) {        ...//This omits the code several         var i=0;      for (var state in-) {          China[state [' path '].color = Raphael.getcolor (0.9);          (function (St, state) {      &NB Sp       var prodata = data[i];              var fillcolor = Colors[arr[i]] ;              st.attr ({fill:fillcolor});/Fill BackLandscape               Xoffset = 70;              Yoffset = 180;              St.hover (function (e) {//mouse sliding to                   St.animate ({fill: "#fdd", Stroke: "#eee"}, +);              &NB Sp   R.safari ();                                  $ ("# Tip "). css ({" Top ":(E.pagey-xoffset) +" px "," left ":(E.pagex-yoffset) +" px "}). FadeIn (" Fast ")                  . HTML ("<h4>" +china[state][' name ']+ "</h4><p> active user number:" +prodata+ " </p> ");             },function () {//mouse departure                   St.animate ({fill:fillcolor, stroke: "#eee"}, +);                  R.SAFari ();                  $ ("#tip"). Hide ();             });                St.mousemove (function (e) {//mouse mobile     &NBS P             $ ("#tip"). CSS ({"Top":(E.pagey-xoffset) + "px", "left":(E.pagex-yoffset) + "px"} );                  R.safari ();            &NBS P ;            &NBSP}) (china[state][' path ', state);          &NBS p;i++;     }     }); });    The above code can be seen through jquery's hover () mouse to the province block, Call pop-up prompt box, and load the data into the prompt box, and it is worth noting that we also need to add an effect, that is, the mouse on the province block to move mousemove (), you should also call the prompt box to follow the mouse to move together, Otherwise, when the mouse is sliding in a province block, the prompt box position will not change, this will affect the experience effect, small changes can enhance the user experience. Finally, if you need to customize the effect of the balloon, you can set the CSS style of the hint box, this example simple CSS code as follows:     code as follows: #tip {position:absolute; width:180px; border:1px Solid #d3d3d3; BackGround: #fff;d isplay:none; -moz-border-radius:5px; -webkit-border-radius:5px; Overflow:hidden; border-radius:5px; -moz-box-shadow:1px 1px 2px rgba (0,0,0,.2); -webkit-box-shadow:1px 1px 2px Rgba (0,0,0,.2);   box-shadow:1px 1px 2px rgba (0,0,0,.2);}   #tip h4{height:28px line-height:28px; padding-left:6px background: #f0f0f0}  #tip p{line-height:24px; padding:2px 4px}