PHP和jQuery实现地图区域数据统计显示的数据示例

HTML

首先，在头部raphael.js加载库文件和chinamappath.js路径信息的文件。这篇文章不反复写。唯一不同的是，我们需要添加一个DIV #尖体显示地图信息提示框。

复制代码代码如下所示：

jQuery

通过调用拉斐尔绘制中国地图，然后加载到统计数据中。由于图块很小，我们没有数据显示在图块在地图载入时，我们可以更好的显示数据信息，通过鼠标交互的用户。当鼠标滑到省块，定位鼠标坐标通过e.pagex和e.pagey，然后找到提示框div #尖通过css（）方法jQuery，添加名称和相应的省活跃用户数的提示框，显示它，看代码：

复制代码代码如下所示：
$（函数（）{（））
获取（）

…这里省略了一些代码…

var I＝0；
对于（在中国无功状态）{
中国{ } { } 'path状态的颜色= raphael.getcolor（0.9）；
函数（st，State）{
VaR奔腾达=数据{我}；
VAR设置=颜色{ ARR {我} }；
St.attr（{补：设置}）； / /填充背景色
xoffset = 70；
yoffset = 180；
St.hover（功能（e）{ / /鼠标滑动
st.animate（{补：# FDD
R.safari（）；
$（#尖）。Css（{顶：（e.pagey-xoffset）+PX
.html（+中国{状态} { 'name' } +活跃用户数：+奔腾达+ ）；
（函数），左鼠标
st.animate（{补：设置、中风：# EEE}，500）；
R.safari（）；
$（#尖）隐藏（）；
}）；

St.mousemove（功能（e）{ / /移动鼠标
$（#尖）。Css（{顶：（e.pagey-xoffset）+PX
R.safari（）；
}）；

}）（中国国家} { } { 'path，状态）；
++；
}
}）；
}）；
上面的代码可以看出，jQuery（悬停）鼠标块省，称为弹出框，并将数据加载到一个提示框显示，值得关注的是，我们还需要添加一个效果，鼠标在块各省移动MouseMove（）时，应遵循的提示框鼠标一起移动，否则当鼠标滑动在一省范围内一块文字提示框的位置不会改变，这将影响体验效果，小的变化可以提升用户体验。
最后，如果您需要自定义提示框的效果，您可以设置提示框的CSS样式。这个简单的CSS代码如下所示：

复制代码代码如下所示：
#尖{位置：绝对；宽度：180px；边框1px solid # d3d3d3；背景：# FFF；显示：无；
-moz边界半径：5px；- WebKit的边界半径：5px；溢出：隐藏；边界半径：5px；
-moz盒阴影：1px 1px 2px RGBA（0,0,0，。2）；- WebKit盒阴影：1px 1px 2px RGBA（0,0,0，。2）；
盒子的影子：1px 1px 2px RGBA（0,0,0，2）；}
#尖H4 {身高：28px；线高度：28px；填充左：6px；背景：# f0f0f0 }
#尖P {线高度：24px；填充：2px 4px }