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

首先，HTML在头部加载raphael.js库文件和chinamapPath.js路径信息文件。本文不再赘述。唯一不同的是需要在正文中添加一个div#tip来显示地图信息的提示框。复制的代码如下： div id=' map '/div div id=' tip '/div jquery通过调用raphael绘制中国地图，然后加载统计数据。因为地图块比较小，我们在加载地图的时候不会把数据显示在地图块上，这样可以通过鼠标交互更好的把数据信息显示给用户。当鼠标滑动到省块时，使用e.pageX和e.pageY定位鼠标坐标，然后使用jquery的css()方法定位提示框div#tip，在提示框中添加对应省的名称和活跃用户数并显示。请看代码：复制代码如下： $ (function () {$)。get ('json.php '，函数(。for(var state in China){ China[state][' path ']。color=Raphael . getcolor(0.9)；(函数(st，state){ var prodata=data[I]；var fill color=colors[arr[I]]；ST . attr({ fill : fill color })；//填充背景色xOffset=70yOffset=180St.hover(函数(e){//鼠标滑动到St. animate ({fill:' # FDD '，stroke :' # EEE'}，500)；r . safari()；$ ('# tip ')。CSS({ ' top ' :(e . pagey-xooffset)' px '，' left ' :(e . pagex-yooffset)' px ' })。fadein ('fast ')。html ('H4 '。}，function(){//鼠标离开St. animal ({fill: fillcolor，stroke :' # eee'}，500)；r . safari()；$('#tip ')。hide()；});St.mousemove(函数(e){//鼠标移动$ ('# tip ')。CSS({ ' top ' :(e . pagey-xoffset)' px '，' left ' 3360(e . pagex-yoffset)' px ' })；r . safari()；});})(中国[州]['路径']，州)；我；} });});从上面的代码可以看出，当jQuery的hover()鼠标滑动到省块时，调用弹出的提示框，数据被加载并显示在提示框中。但值得注意的是，我们需要添加一个效果，即当鼠标在省块上移动mousemove()时，也要调用提示框随鼠标移动；否则，当鼠标在一个省块内滑动时，提示框的位置不会改变，会影响体验效果。最后，如果需要自定义提示框的效果，可以设置提示框的CSS样式。这个例子的简单CSS代码如下：复制代码如下： # tip { position : absolute；宽度width:180pxborder:1px固体# d3d3d3背景# fffdisplay:none-moz-border-radius :5 px；-web kit-border-radius :5 px；飞越：隐藏；border-radius :5 px；-moz-box-shadow :1 px 1px 2px rgba(0，0，0， 2)；-web kit-box-shadow :1 px 1px 2px rgba(0，0，0， 2)；box-shadow:1px 1px 2px rgba(0，0，0， 2)；} # tip h4 { height:28px行高：28 px；左填充：6 px；背景： # f0f 0 } # tip p { line-height :24 px；padding:2px 4px }