下载本文档
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
【移动应用开发技术】怎么用php和jquery实现地图区域数据统计展示数据
本文在下为大家详细介绍“怎么用php和jquery实现地图区域数据统计展示数据”,内容详细,步骤清晰,细节处理妥当,希望这篇“怎么用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("<h5>"+china[state]['name']+"</h5><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);}
#ti
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 医用激光仪器项目商业计划书及实施方案|瑞克咨询|2024年编|
- 工程吊灯项目可行性研究报告及运营方案|瑞克咨询|2024年编|
- 2024年机械制造行业技能考试-焊工微机笔试参考题库含答案
- 2024年机械制造行业技能考试-内燃机装试工笔试参考题库含答案
- 五年高考高考英语真题分项详解 专题12 形容词和副词(含解析)-人教高三全册英语试题
- 2024年服务行业技能考试-公关员职业资格笔试参考题库含答案
- 2024年建筑继续教育-造价工程师继续教育笔试参考题库含答案
- 2024年广东住院医师-广东住院医师公共科目笔试参考题库含答案
- 2024年岗位知识竞赛-ASM工序知识竞赛笔试参考题库含答案
- 2024年天津住院医师-天津住院医师儿科笔试参考题库含答案
- 鱼跃医疗健康品牌618淘宝直播营销方案【医疗器械】【直播带货】
- 湖北省建设工程招标评标办法
- 售楼部钢结构玻璃幕墙拆除方案
- 儿童正确刷牙方法
- 催化裂化的主要设备
- 产品特殊价格申请表
- 2004级毕业生信息-陕西师范大学教育学院
- 2021-2022学年山东省临沂市统招专升本管理学自考预测试题(含答案)
- 上海市政道路施工组织设计2方案
- 七年级科学下册 期中探究精选试卷易错题(Word版)
- 汽车零部件DFMEA模板
评论
0/150
提交评论