Home > Article > Backend Development > 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.
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:
Number of active users: "+prodata+" p>");
}, 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: