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

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

  1. <div id="map"></div>
  2. <div id="tip"></div>

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

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="raphael.js"></script>
  3. <script type="text/javascript" src="chinamapPath.js"></script>

通过调用raphael绘制出中国地图,然后载入统计数据,由于地图区块小,我们不在地图载入的时候就将数据显示在地图区块上了,我们通过鼠标交互实现将数据信息更好的展示给用户。当鼠标滑向省份区块时,通过e.clientX和e.clientY定位鼠标坐标,然后通过jquery的css()方法定位提示框div#tip,并且将对应省份的的名称和活跃用户数加到提示框里并展现出来,代码如下:

  1. $(function() {
  2. $.get("json.php",
  3. function(json) {
  4. var data = string2Array(json);
  5. var flag;
  6. var arr = new Array();
  7. for (var i = 0; i < data.length; i++) {
  8. var d = data[i];
  9. if (d < 100) {
  10. flag = 0;
  11. } else if (d >= 100 && d < 500) {
  12. flag = 1;
  13. } else if (d >= 500 && d < 2000) {
  14. flag = 2;
  15. } else if (d >= 2000 && d < 5000) {
  16. flag = 3;
  17. } else if (d >= 5000 && d < 10000) {
  18. flag = 4;
  19. } else {
  20. flag = 5;
  21. }
  22. arr.push(flag);
  23. }
  24. var colors = ["#d7eef8", "#97d6f5", "#3fbeef", "#00a2e9", "#0084be", "#005c86"];
  25. var R = Raphael("map", 600, 500);
  26.  
  27. //调用绘制地图方法
  28. paintMap(R);
  29.  
  30. var i = 0;
  31. for (var state in china) {
  32. china[state]['path'].color = Raphael.getColor(0.9); (function(st, state) {
  33. var prodata = data[i];
  34. var fillcolor = colors[arr[i]];
  35. st.attr({
  36. fill: fillcolor
  37. }); //填充背景色
  38. xOffset = 70;
  39. yOffset = 180;
  40. st.hover(function(e) {
  41. st.animate({
  42. fill: "#fdd",
  43. stroke: "#eee"
  44. },
  45. 500);
  46. R.safari();
  47. $("#tip").css({
  48. "top": (e.clientY - xOffset) + "px",
  49. "left": (e.clientX - yOffset) + "px"
  50. }).fadeIn("fast").html("<h4>" + china[state]['name'] + "</h4><p>活跃用户数:" + prodata + "</p>");
  51. },
  52. function() {
  53. st.animate({
  54. fill: fillcolor,
  55. stroke: "#eee"
  56. },
  57. 500);
  58. R.safari();
  59. $("#tip").hide();
  60. });
  61.  
  62. st.mousemove(function(e) {
  63. $("#tip").css({
  64. "top": (e.clientY - xOffset) + "px",
  65. "left": (e.clientX - yOffset) + "px"
  66. });
  67. R.safari();
  68. });
  69.  
  70. })(china[state]['path'], state);
  71. i++;
  72. }
  73. });
  74. });
  75.  
  76. function string2Array(string) {
  77. eval("var result = " + decodeURI(string));
  78. return result;
  79. }

本文转自:https://www.sucaihuo.com/php/147.html 转载请注明出处!

PHP+jQuery中国地图热点数据统计展示实例的更多相关文章

  1. PHP+Mysql+jQuery实现地图区域数据统计-展示数据

    我们要在地图上有限的区块内展示更多的信息,更好的办法是通过地图交互来实现.本文将给大家讲解通过鼠标滑动到地图指定省份区域,在弹出的提示框中显示对应省份的数据信息.适用于数据统计和地图区块展示等场景. ...

  2. jQuery+PHP+Ajax动态数字统计展示实例

    jQuery+PHP+Ajax实现的一款动态数字统计展示实例,本例是在页面上动态展示了当前在线用户数,当然了,你可以应用到其他更多场景中. 首先我们在#number放置要统计的数字: <div ...

  3. PHP+Mysql+jQuery实现中国地图区域数据统计(raphael.js)

    使用过百度统计或者cnzz统计的童鞋应该知道,后台有一个地图统计,不同访问量的省份显示的颜色也不一样,今天我将带领大家开发一个这样的案例.上一篇<使用raphael.js绘制中国地图>文章 ...

  4. 用python实现简单EXCEL数据统计的实例

    用python实现简单EXCEL数据统计的实例 下面小编就为大家带来一篇用python实现简单EXCEL数据统计的实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 任 ...

  5. jquery中国地图插件

    插件下载地址: http://www.17sucai.com/preview/1266961/2018-09-18/map/js/jsMap-1.1.0.min.js jsMap 项目介绍 这是一个功 ...

  6. PHP+MySQL实现对一段时间内每天数据统计优化操作实例

    http://www.jb51.net/article/136685.htm 这篇文章主要介绍了PHP+MySQL实现对一段时间内每天数据统计优化操作,结合具体实例形式分析了php针对mysql查询统 ...

  7. 7款个性化jQuery/HTML5地图插件

    现在我们经常会用到一些地图应用,无论是在网页上还是手机App中,地图貌似是一个不可或缺的应用.本文将带领大家一起来看看一些基于jQuery和HTML5的个性化地图插件,有几款地图比较实用,有些则是具有 ...

  8. R绘制中国地图,并展示流行病学数据

    流行病学的数据讲究“三间分布”,即人群分布.时间分布和空间分布.其中的“空间分布”最好是在地图上展示,才比较清楚.R软件集统计分析与高级绘图于大成,是最适合做这项工作了.关于地图的绘制过程,谢益辉.邱 ...

  9. 基于Echarts的中国地图数据展示

    发布时间:2018-10-31   技术:javascript+html5+canvas   概述 基于echarts的大数据中国地图展示,结合API定制,开发样式,监听鼠标事件,实现带参数路由跳转等 ...

随机推荐

  1. 基于H.ui.Admin UI模板的网站管理后台

    最近接手一个跨境电商平台开发,客户侧重电商网站UI设计,对管理后台要求不高,由我们决定选哪一款后台模板.找来找去,感觉还是H.ui靠谱一些,主要是这个模板清爽,不需要过多选择.其他的流行后台模板也看了 ...

  2. C#DateTime格式转换全介绍

    DateTime与字符串转换: DateTime()与转换为字符串主要依靠DateTime().ToString(string format) 函数,以我的理解,参数format大体分为单个字母和多个 ...

  3. KETTLE教程实战

    kettle初探 Kettle简介:Kettle是一款国外开源的ETL工具,纯java编写,可以在Window.Linux.Unix上运行,数据抽取高效稳定.Kettle 中文名称叫水壶,该项目的主程 ...

  4. iPhone唯一标识符

    为了区分iPhone设备,就要用到iPhone的唯一标识符唯一标识符包括:UDID(唯一设备标识符).identifierForVendor(供应商标识符).advertisingIdentifier ...

  5. mininet(三)简单的NAT实验

    mininet(一)实验环境搭建 mininet(二)简单的路由实验 mininet(三)简单的NAT实验 本次实验拓扑图如下: 假设 Openvswitch switch1是一个带有NAT功能的路由 ...

  6. [TimLinux] JavaScript 获取设置在CSS类中的属性值

    1. 设置属性值 // 常用方式 var myEl = document.getElementById('idMyEl'); myEl.style.display = "none" ...

  7. 【解决】OCI runtime exec failed......executable file not found in $PATH": unknown

    [问题]使用docker exec + sh进入容器时报错 [root@localhost home]# docker exec -it container-test bash OCI runtime ...

  8. Balls in the Boxes

    Description Mr. Mindless has many balls and many boxes,he wants to put all the balls into some of th ...

  9. CSU oj 2092-Space Golf

    You surely have never heard of this new planet surface exploration scheme, as it is being carried ou ...

  10. Python如何实现微信群万人同步直播?

    很多人传言微信网页版(https://wx.qq.com/)接口已经被封了,所以所有的微信都不能登录网页版,这是错误的. 2019年7月微信对网页版微信进行了动态安全策略调整,导致一大批微信号不能登录 ...