Shulou(Shulou.com)06/01 Report--

This article is to share with you about how PHP+jQuery realizes the statistical display of hot spot data on Chinese maps. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

An example of China map hotspot data statistics and display implemented by PHP+jQuery. When the mouse is rolled over the designated province area of the map, the data information of the corresponding province is displayed in the pop-up prompt box.

First of all, add a div#tip to the page, a prompt box to display map information and # map to generate maps.

Then we introduce jQuery library, raphael.js and chinamapPath.js (map data of China).

By calling raphael to draw the map of China, and then loading the statistical data, because the map block is small, we do not display the data on the map block when the map is loaded, we can better display the data information to the user through mouse interaction. When the mouse is over the province block, locate the mouse coordinates through e.clientX and e.clientY, then locate the prompt box div#tip through the css () method of jquery, and add the name of the corresponding province and the number of active users to the prompt box and display it. The code is as follows:

$(function () {$.get ("json.php", function (json) {var data = string2Array (json); var flag;var arr = new Array (); for (var I = 0; I)

= 100 & d

= 500 & d

= 2000 & & d

= 5000 & d < 10000) {flag = 4;} else {flag = 5;} arr.push (flag);} var colors = ["# d7eef8", "# 97d6f5", "# 3fbeef", "# 00a2e9", "# 0084be", "# 005c86"]; var R = Raphael ("map", 600500); / / call the mapping method paintMap (R); 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 [arr]]; st.attr ({fill: fillcolor}); / / fill background color xOffset = 70 × yOffset = 180 × st.hover (function (e) {st.animate ({fill: "# fdd", stroke: "# eee"}, 500); R.safari () $("# tip") .css ({"top": (e.clientY-xOffset) + "px", "left": (e.clientX-yOffset) + "px"}) .fadeIn ("fast") .html ("" + china [state] ['name'] + ")

Active users: "+ prodata +"

);}, function () {st.animate ({fill: fillcolor,stroke: "# eee"}, 500); R.safari (); $("# tip"). Hide ();}); st.mousemove (function (e) {$("# tip"). Css ({"top": (e.clientY-xOffset) + "px", "left": (e.clientX-yOffset) + "px"}); R.safari ();}) Function string2Array (string) {eval ("var result =" + decodeURI (string)); return result;} Thank you for reading! This is the end of the article on "how to realize the Statistical display of Hot spot data on Chinese Map by PHP+jQuery". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.