PHP and jquery Implementation Map area data Statistics Demonstration Data Sample _php Tutorial

Html

First load the Raphael.js library file and the Chinamappath.js path information file in the Head section, this article does not repeat, the only difference is the need to add a div#tip in the body to display the map information of the prompt box.

Copy the Code code as follows:

Jquery

By calling Raphael to draw a map of China, and then loading the statistics, because the map block is small, we do not display the data on the map block when the map is loaded, we can display the data information better to the user through the mouse interactive implementation. When the mouse slide to the province block, through E.pagex and e.pagey positioning the mouse coordinates, and then through the jquery CSS () method to locate the Cue box Div#tip, and the corresponding province of the name and number of active users added to the prompt box and display, see the code:

Copy the Code code as follows:
$ (function () {
$.get ("json.php", function (JSON) {

...//omit some code here

var i=0;
For (Var-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});//Fill background color
Xoffset = 70;
Yoffset = 180;
St.hover (function (e) {//mouse slide
St.animate ({fill: "#fdd", Stroke: "#eee"}, 500);
R.safari ();
$ ("#tip"). CSS ({"Top":(E.pagey-xoffset) + "px", "left":(E.pagex-yoffset) + "px"}). FadeIn ("Fast")
. HTML ("

"+china[state][' name ']+"

Number of active Users: "+prodata+"

");
},function () {//mouse left
St.animate ({fill:fillcolor, stroke: "#eee"}, 500);
R.safari ();
$ ("#tip"). Hide ();
});

St.mousemove (function (e) {//mouse movement
$ ("#tip"). CSS ({"Top":(E.pagey-xoffset) + "px", "left":(E.pagex-yoffset) + "px"});
R.safari ();
});

}) (china[state][' path '], state);
i++;
}
});
});

The above code can be seen through jquery hover () mouse slide to the province block, call pop-up prompt box, and the data loading display in the prompt box, and it is worth noting that we also need to add an effect, that is, the mouse in the province block move mousemove (), You should also call the prompt box to follow the mouse to move, otherwise, when the mouse in a province block sliding words, the position of the cue box will not change, this will affect the experience effect, small changes can improve the user experience.
Finally, if you need to customize the effect of the cue box, you can set the CSS style of the cue box, in this case the simple CSS code is as follows:

Copy the Code 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}

http://www.bkjia.com/PHPjc/733411.html www.bkjia.com true http://www.bkjia.com/PHPjc/733411.html techarticle HTML first loaded in the Head section Raphael.js library files and Chinamappath.js path information files, this article does not repeat, the only difference is the need to add a div#tip in the body to show ...

