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实现Socket服务器的代码
Apr 03 PHP
在php MYSQL中插入当前时间
Apr 06 PHP
PHP curl模拟浏览器采集阿里巴巴的实现代码
Apr 20 PHP
PHP两种去掉数组重复值的方法比较
Jun 19 PHP
php删除左端与右端空格的方法
Nov 29 PHP
php面向对象中static静态属性与方法的内存位置分析
Feb 08 PHP
PHP中的事务使用实例
May 26 PHP
又十个超级有用的PHP代码片段
Sep 24 PHP
orm获取关联表里的属性值
Apr 17 PHP
PHP序列化/对象注入漏洞分析
Apr 18 PHP
php图像验证码生成代码
Jun 08 PHP
在 Laravel 6 中缓存数据库查询结果的方法
Dec 11 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数组最大值,最小值的代码
2011/10/31 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
python3音乐播放器简单实现代码
2020/04/20 Python
Python制作刷网页流量工具
2017/04/23 Python
图解Python变量与赋值
2018/04/03 Python
Tensorflow中的placeholder和feed_dict的使用
2018/07/09 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
Python使用python-docx读写word文档
2019/08/26 Python
python代码中怎么换行
2020/06/17 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
服装厂厂长职责
2013/12/16 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
2015年乡镇发展党员工作总结
2015/03/31 职场文书
不同意离婚上诉状
2015/05/23 职场文书
消费者理赔投诉书
2015/07/02 职场文书
《包身工》教学反思
2016/02/23 职场文书