PHP Mysql jQuery:中国地图区域数据统计实例

今天，我将介绍如何在实际应用中将数据加载到地图中。结合实例，利用PHP Mysql jQuery实现中国地图各省数据的统计效果。

这个例子是基于每个省的产品活跃用户数的统计。数据来自mysql数据库。根据各省活跃用户数划分不同等级，各省活跃程度以不同背景色显示，符合实际应用需求。

超文本标记语言

首先，在头部加载raphael.js库文件和chinamapPath.js路径信息文件。

脚本类型=' text/JavaScript ' src=' http : jquery . js '/脚本脚本类型=' text/JavaScript ' src=' http : Raphael . js '/脚本脚本类型=' text/JavaScript ' src=' http : chinmappath . js '/脚本，然后在需要放置地图的正文中放置div#map。

div id='map'/divPHP

我们准备了一个名为mapdata的mysql表，存储各省产品的活跃用户数据。我们使用PHP读取mysql表中的数据，并将读取的数据以json格式输出，并将PHP文件命名为json.php。

$ host=' localhost//Host $ db _ user=' root '；//数据库用户名$ db _ pass=//密码$ db _ name=' demo//数据库名$ link=MySQL _ connect ($ host，$ db _ user，$ db _ pass)；//连接到数据库mysql_select_db($db_name，$ link)；MySQL _ query(' SET name UTF8 ')；$sql='按id asc从mapdata订单中选择活动'；//Query $ Query=MySQL _ Query($ SQL)；while($ row=MySQL _ fetch _ array($ query)){ $ arr[]=$ row[' active ']；} echo JSON _ encode($ arr)；//mysql_close($link //JSON格式($ link)；//关闭连接。值得注意的是，我们应该按照chinamapPath.js文件中省份的顺序对mapdata表中的省份进行排序，以保证读取的数据能够对应到地图中的省份。

jQuery

首先，我们使用jquery的get()方法获取json数据。

$(function(){ $)。get('json.php '，function(JSON){ 0.});});在获得json数据之后，我们必须首先将json数据转换成一个数组，然后遍历整个数组。根据json数据中各省的活跃用户数，我们进行了等级区分。在这里，我把成绩分为6个等级：0-5。活跃用户数越大，背景颜色越暗，这样在地图上显示时就能清晰的看到不同省份的数据等级。

请查看排序后的代码：

$(function(){ $).get('json.php '，function(json){//获取数据var数据=字符串数组(JSON)；//转换数组定义变量标志；var arr=新数组();//定义新数组，对应等级for(var I=0；idata.lengthi ){ var d=数据[一]；if(d100){ flag=0；} else if(d=100 d500){ flag=1；} else if(d=500d 2000){ flag=2；} else if(d=2000d 5000){ flag=3；} else if(d=5000d 10000){ flag=4；} else { flag=5；} arr.push(标志);} //定义颜色var colors=['#d7eef8 '，' #97d6f5 '，' #3fbeef '，' #00a2e9 '，' #0084be '，' # 005 c86 ']；//调用绘制地图方法var R=拉斐尔('地图',600,500);绘画地图；var textAttr={ 'fill': '#000 '，' font-size': '12px '，' cursor ' : ' pointer ' }；var I=0；for(var state in China){ China[state][' path '].颜色=拉斐尔。getcolor(0.9)；（函数(州首府){ //获取当前图形的中心坐标var xx=st.getBBox().x(ST . GetBox().宽度/2);var yy=st.getBBox().y(ST . GetBox().高度/2);//修改部分地图文字偏移坐标开关(中国[国家]['name']) { case '江苏： xx=5；YY-=10；打破；案例河北： xx-=10；yy=20打破；案例天津： xx=10yy=10打破；案例上海： xx=10打破；案例广东： YY-=10；打破；案例澳门： yy=10打破；案例香港： xx=20YY=5；打破；案例甘肃： xx-=40；YY-=30；打破；案例陕西： xx=5；yy=10打破；案例内蒙古： xx-=15；yy=65打破；default: } //写入文字中国[州]['text']=R.text(xx，yy，中国[州]['name']).attr(TextAttr)；变化填充颜色=颜色[arr[I]]；//获取对应的颜色ST . attr({ fill : fill color })；//填充背景色st[0].onmouseover=function(){ ST . animate({ fill : ' # FDD '，stroke: '#eee'}，500)；中国[国家]['文本']。toFront()；r . safari()；};st[0].onmouseout=function(){ ST . animate({ fill : fill color，stroke: '#eee'}，500)；中国[国家]['文本']。toFront()；r . safari()；};})(中国[州]['路径'],州);我；} });});上述代码中，使用变化填充颜色=颜色[arr[I]]；获取对应等级的颜色值，然后通过ST . attr({ fill : fill color })；将颜色填充到对应的省份区块中。此外string2Array()函数是将字符串转换为数组。

函数string 2数组(string){ eval(' var result=' decodeURI(string))；返回结果；}通过以上步骤，我们就可以看到一个不同省份不同背景色的中国地图，根据不同颜色可以区分省份之间的活跃用户数差异程度，达到预期目标，小伙伴们希望这篇文章对大家的学习有所帮助。