当前位置:首页 > PHP教程 > php应用 > 列表

PHP+jQuery实现中国地图热点数据统计展示效果

发布:smiling 来源: PHP粉丝网  添加日期:2022-05-28 08:57:33 浏览: 评论:0 

一款PHP+jQuery实现的中国地图热点数据统计展示实例,当鼠标滑动到地图指定省份区域,在弹出的提示框中显示对应省份的数据信息。

PHP+jQuery实现中国地图热点数据统计展示效果

首先在页面中加一个div#tip,用来展示地图信息的提示框和#map用来生成地图。

<div id="map"></div> 

<div id="tip"></div>

接着我们引入jQuery库、raphael.js及chinamapPath.js(中国地图数据)

<script type="text/javascript" src="jquery.js"></script> 

<script type="text/javascript" src="raphael.js"></script>

<script type="text/javascript" src="chinamapPath.js"></script>

通过调用raphael绘制出中国地图,然后载入统计数据,由于地图区块小,我们不在地图载入的时候就将数据显示在地图区块上了,我们通过鼠标交互实现将数据信息更好的展示给用户。

当鼠标滑向省份区块时,通过e.clientX和e.clientY定位鼠标坐标,然后通过jquery的css()方法定位提示框div#tip,并且将对应省份的的名称和活跃用户数加到提示框里并展现出来,代码如下:

  1. $(function() {  
  2.  
  3.     $.get("json.php",  
  4.  
  5.     function(json) {  
  6.  
  7.         var data = string2Array(json);  
  8.  
  9.         var flag;  
  10.  
  11.         var arr = new Array();  
  12.  
  13.         for (var i = 0; i < data.length; i++) {  
  14.  
  15.             var d = data[i];  
  16.  
  17.             if (d < 100) {  
  18.  
  19.                 flag = 0;  
  20.  
  21.             } else if (d >= 100 && d < 500) {  
  22.  
  23.                 flag = 1;  
  24.  
  25.             } else if (d >= 500 && d < 2000) {  
  26.  
  27.                 flag = 2;  
  28.  
  29.             } else if (d >= 2000 && d < 5000) {  
  30.  
  31.                 flag = 3;  
  32.  
  33.             } else if (d >= 5000 && d < 10000) {  
  34.  
  35.                 flag = 4;  
  36.  
  37.             } else {  
  38.  
  39.                 flag = 5;  
  40.  
  41.             }  
  42.  
  43.             arr.push(flag);  
  44.  
  45.         }  
  46.  
  47.         var colors = ["#d7eef8""#97d6f5""#3fbeef""#00a2e9""#0084be""#005c86"];  
  48.  
  49.         var R = Raphael("map", 600, 500);  
  50.  
  51.    
  52.  
  53.         //调用绘制地图方法  
  54.  
  55.         paintMap(R);  
  56.  
  57.    
  58.  
  59.         var i = 0;  
  60.  
  61.         for (var state in china) {  
  62.  
  63.             china[state]['path'].color = Raphael.getColor(0.9); (function(st, state) {  
  64.  
  65.                 var prodata = data[i];  
  66.  
  67.                 var fillcolor = colors[arr[i]];  
  68.  
  69.                 st.attr({  
  70.  
  71.                     fill: fillcolor  
  72.  
  73.                 }); //填充背景色  
  74.  
  75.                 xOffset = 70;  
  76.  
  77.                 yOffset = 180;  
  78.  
  79.                 st.hover(function(e) {  
  80.  
  81.                     st.animate({  
  82.  
  83.                         fill: "#fdd",  
  84.  
  85.                         stroke: "#eee" 
  86.  
  87.                     },  
  88.  
  89.                     500);  
  90.  
  91.                     R.safari();  
  92.  
  93.                     $("#tip").css({  
  94.  
  95.                         "top": (e.clientY - xOffset) + "px",  
  96.  
  97.                         "left": (e.clientX - yOffset) + "px" 
  98.  
  99.                     }).fadeIn("fast").html("<h4>" + china[state]['name'] + "</h4><p>活跃用户数:" + prodata + "</p>");  
  100.  
  101.                 },  
  102.  
  103.                 function() {  
  104.  
  105.                     st.animate({  
  106.  
  107.                         fill: fillcolor,  
  108.  
  109.                         stroke: "#eee" 
  110.  
  111.                     },  
  112.  
  113.                     500);  
  114.  
  115.                     R.safari();  
  116.  
  117.                     $("#tip").hide();  
  118.  
  119.                 });  
  120.  
  121.    
  122.  
  123.                 st.mousemove(function(e) {  
  124.  
  125.                     $("#tip").css({  
  126.  
  127.                         "top": (e.clientY - xOffset) + "px",  
  128.  
  129.                         "left": (e.clientX - yOffset) + "px" 
  130.  
  131.                     });  
  132.  
  133.                     R.safari();  
  134.  
  135.                 });  
  136.  
  137.    
  138.  
  139.             })(china[state]['path'], state);  
  140.  
  141.             i++;  
  142.  
  143.         }  
  144.  
  145.     });  
  146.  
  147. });  
  148.  
  149.    
  150.  
  151. function string2Array(string) {  
  152.  
  153.     eval("var result = " + decodeURI(string));  
  154.  
  155.     return result;  
  156.  
  157. }

Tags: PHP+jQuery地图热点数据统

分享到: