php和jquery实现地图区域数据统计展示数据示例


Posted in PHP onFebruary 12, 2014

php和jquery实现地图区域数据统计展示数据示例

HTML

首先在head部分载入raphael.js库文件和chinamapPath.js路径信息文件,本文不重复写下,唯一不同的地方是需要在body中加一个div#tip,用来展示地图信息的提示框。

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

jQuery

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

$(function(){ 
    $.get("json.php",function(json){     ......//这里省略代码若干 
    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});//填充背景色 
            xOffset = 70; 
            yOffset = 180; 
            st.hover(function(e){//鼠标滑向 
                st.animate({fill: "#fdd", stroke: "#eee"}, 500); 
                R.safari();                 
                $("#tip").css({"top":(e.pageY-xOffset)+"px","left":(e.pageX-yOffset)+"px"}).fadeIn("fast") 
                .html("<h4>"+china[state]['name']+"</h4><p>活跃用户数:"+prodata+"</p>"); 
            },function(){//鼠标离开 
                st.animate({fill: fillcolor, stroke: "#eee"}, 500); 
                R.safari(); 
                $("#tip").hide(); 
            }); 
            st.mousemove(function(e){//鼠标移动 
                $("#tip").css({"top":(e.pageY-xOffset)+"px","left":(e.pageX-yOffset)+"px"}); 
                R.safari(); 
            }); 
         })(china[state]['path'], state); 
         i++; 
    } 
    }); 
});

以上代码可以看出,通过jQuery的hover()鼠标滑向省份区块时,调用弹出提示框,并将数据载入显示在提示框中,而值得关注的是,我们还需要加一个效果,就是鼠标在省份区块上移动mousemove()的时候,也应该调用提示框跟随鼠标一起移动,否则的话当鼠标在一个省份区块内滑动的话提示框位置不会变化,这样会影响体验效果,小小的改动可以提升用户体验。
最后,如果您需要定制提示框的效果的话,可以设置提示框的CSS样式,本例简单的CSS代码如下:

#tip{position:absolute; width:180px; border:1px solid #d3d3d3; background:#fff;display:none; 
-moz-border-radius:5px; -webkit-border-radius:5px; overflow:hidden; border-radius:5px; 
-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2);  
box-shadow:1px 1px 2px rgba(0,0,0,.2);} 
#tip h4{height:28px; line-height:28px; padding-left:6px; background:#f0f0f0} 
#tip p{line-height:24px; padding:2px 4px}
PHP 相关文章推荐
PHP详解ASCII码对照表与字符转换
Dec 05 PHP
用PHP实现Ftp用户的在线管理
Feb 16 PHP
PHP Error与Logging函数的深入理解
Jun 03 PHP
PHP同时连接多个mysql数据库示例代码
Mar 17 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
Apr 08 PHP
php使用curl和正则表达式抓取网页数据示例
Apr 13 PHP
PHP中cookie和session的区别实例分析
Aug 28 PHP
php打造智能化的柱状图程序,用于报表等
Jun 19 PHP
Zend Framework教程之资源(Resources)用法实例详解
Mar 14 PHP
如何使用php等比例缩放图片
Oct 12 PHP
php对接java现实加签验签的实例
Nov 25 PHP
PHP调试及性能分析工具Xdebug详解
Feb 09 PHP
php中的路径问题与set_include_path使用介绍
Feb 11 #PHP
php 不使用js实现页面跳转
Feb 11 #PHP
简单的php中文转拼音的实现代码
Feb 11 #PHP
PHP字符串的递增和递减示例介绍
Feb 11 #PHP
thinkphp3查询mssql数据库乱码解决方法分享
Feb 11 #PHP
php发送post请求的三种方法
Feb 11 #PHP
codeigniter教程之多文件上传使用示例
Feb 11 #PHP
You might like
php获取本周星期一具体日期的方法
2015/04/20 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
PHP实现递归的三种方法
2020/07/04 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
Python切片操作实例分析
2018/03/16 Python
Numpy数组的保存与读取方法
2018/04/04 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
python+tkinter实现学生管理系统
2019/08/20 Python
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
中药专业自荐信范文
2014/03/18 职场文书
采购意向书范本
2014/03/31 职场文书
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
创先争优活动心得体会
2014/09/04 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
班子群众路线教育实践个人对照检查材料思想汇报
2014/09/30 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript