PHP and jquery implement map area data statistics and display data example_PHP tutorial

HTML

First load the raphael.js library file and chimamapPath.js path information file in the head section. This article will not be repeated. The only difference is that a div#tip needs to be added to the body to display map information tips. box.

Copy code The code is as follows:

jQuery

Draw a map of China by calling raphael, and then load the statistical data. Since the map block is small, we do not display the data on the map block when the map is loaded. We update the data information through mouse interaction. Good presentation to users. When the mouse slides to the province block, locate the mouse coordinates through e.pageX and e.pageY, then locate the prompt box div#tip through jquery's css() method, and add the name and number of active users of the corresponding province to the prompt box and display it, please look at the code:

Copy the code The code is as follows:

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

......//Some codes are omitted here

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 [arm [i]];
ST.ATTR ({Fill: Fillcolor}); // Fill the background color
xoffset = 70;
yoffset = 180;
st.hover(function(e){//Mouse slide to
st.animate({fill: "#fdd", stroke: "#eee"}, 500);
R.safari( ); fadeIn("fast")
.html("

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

Number of active users: "+prodata+"");
            }, function(){//Mouse away
                                                                                                                                                                                                                           
                                                                                                               .css({"top":(e.pageY-xOffset)+"px","left":(e.pageX-yOffset)+"px"});
                 R.safari();
});

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

As can be seen from the above code, when the mouse slides to the province block through jQuery's hover(), a pop-up prompt box is called, and the data is loaded and displayed in the prompt box. It is worth noting that we also need to add a The effect is that when the mouse moves mousemove() on a province block, the prompt box should also be called to move with the mouse. Otherwise, when the mouse slides within a province block, the position of the prompt box will not change, which will affect the experience. , small changes can improve user experience.
Finally, if you need to customize the effect of the prompt box, you can set the CSS style of the prompt box. The simple CSS code in this example is as follows:

Copy code The code is as follows:

#tip{position:absolute; width:180px; border:1px solid #d3d3d3; background:#fff;display: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.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/733411.htmlTechArticleHTML First load the raphael.js library file and chinamapPath.js path information file in the head section. This article will not repeat them. Next, the only difference is that you need to add a div#tip in the body to display...