PHP + jQuery China map hot data statistics display example

Time:2020-9-18

A PHP + jQuery implementation of China map hot data statistics display example, when the mouse to the map of the designated province area, the pop-up prompt box shows the corresponding province data information.

First, add a div tip to the page to display the map information and map to generate the map.

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

The map of China is drawn by calling Raphael, and then the statistical data is loaded. Because the map block is small, we will not display the data on the map block when the map is loaded. We can better display the data information to users through mouse interaction. When the mouse slides to the province block, locate the mouse coordinates through e.clientx and e.clienty, and thenThrough the CSS () method of jQuery, the prompt box div ා tip is located, and the name of the corresponding province and the number of active users are added to the prompt box and displayed. 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 < data.length; i++) { 
             var d = data[i]; 
             if (d < 100) { 
                 flag = 0; 
             } else if (d >= 100 && d < 500) { 
                 flag = 1; 
             } else if (d >= 500 && d < 2000) { 
                 flag = 2; 
             } else if (d >= 2000 && d < 5000) { 
                 flag = 3; 
             } else if (d >= 5000 && d < 10000) { 
                 flag = 4; 
             } else { 
                 flag = 5; 
             } 
             arr.push(flag); 
         } 
         var colors = ["#d7eef8", "#97d6f5", "#3fbeef", "#00a2e9", "#0084be", "#005c86"]; 
         var R = Raphael("map", 600, 500); 
  
         //Call the map drawing 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[i]]; 
                 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 '] +" number of 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(); 
                 }); 
  
             })(china[state]['path'], state); 
             i++; 
         } 
     }); 
 }); 
  
 function string2Array(string) { 
     eval("var result = " + decodeURI(string)); 
     return result; 
 }

This paper is transferred from: https://www.sucaihuo.com/php/147.html Reprint please indicate the source!