本例以不同省份的产品的活跃用户数据为背景，从MySQL数据库中的数据，根据不同省份的活跃用户数，它分为不同的等级，并显示不同的背景颜色的省份活动的程度，这是符合实际应用的需要。
HTML
首先，该raphael.js库文件和chinamappath.js路径信息的文件都装在机头。
然后把div #地图在地图上的位置在身体。
PHP
我们准备一个MySQL表命名的地图数据，存储在各省份的产品活跃用户数据。我们用PHP读取数据的MySQL表读取数据输出JSON格式和名称的PHP文件json.php。
为主机=localhost； / /主机
db_user美元=根； / /数据库用户名
db_pass美元= ； / /密码
db_name美元=演示； / /数据库名称
$link = mysql_connect（为主机，db_user美元，美元db_pass）； / /数据库连接
mysql_select_db（db_name美元美元，链接）；
mysql_query（SET NAMES UTF8）；
为SQL =选择活动由ID ASC地图 / /查询订单；
查询= mysql_query美元（$ SQL）；
而（$行= mysql_fetch_array（$查询））{
$ ARR { } =美元排{活动}；
}
回声json_encode（$ ARR）； / / JSON格式
mysql_close（$链接）； / /关闭连接
值得注意的是，我们需要排名的省份的数据表，符合在chinamappath.js文件的省份，这样可以确保数据的读取可以对应在地图的省份。
jQuery
首先，我们使用jQuery的get（）方法获取JSON数据。
$（函数（）{（））
获取（）
…
}）；
}）；
访问JSON数据，我们需要将JSON数据转换成一个数组，然后遍历整个数组，根据活跃用户数省的JSON数据，我们做一个班级的区别，在这里我将分为0-5级六个等级，活跃用户的数量是背景颜色更深，所以，在地图上可以清楚地看到在不同省份的数据的程度。
请看已完成的代码：
$（函数（）{（））
获取（）
VaR数据= string2array（JSON）； / /数组转换
VaR的旗帜；
var arr =新（阵列）； / /定义一个新的阵列，相应的水平
对于（var i = 0；i < data.length；i++）{
变量=数据{ }；
如果（d＜100）{
标志＝0；
}如果（d＝100 d＜500）{
标志＝1；
}如果（d＝500 d＜2000）{
标志＝2；
}如果（d＝2000 d＜5000）{
标志= 3；
}如果（d＝5000 d＜10000）{
标志＝4；
其他{ }
标志＝5；
}
Arr.push（旗）；
}
定义/颜色
VaR的颜色= {# d7eef8
调用映射方法
var =拉斐尔（）映射
paintmap（R）；
无功textattr = { {
补：# 000
字体大小：12px
：指针
}；
var I＝0；
对于（在中国无功状态）{
中国{ } { } 'path状态的颜色= raphael.getcolor（0.9）；
函数（st，State）{
获取当前图形的中心坐标。
VaR XX = st.getbbox（），x（st.getbbox（）。宽度 / 2）；
VaR YY = st.getbbox（）。Y +（st.getbbox（）。身高 / 2）；
修改地图文本偏移坐标的一部分
开关（中国国家} { } { 'name'）{
案例江苏：
XX＝5；
YY = 10；
打破；
案例河北：
XX＝10；
YY = 20；
打破；
案例天津：
XX＝10；
YY = 10；
打破；
案例上海：
XX＝10；
打破；
案例广东：
YY = 10；
打破；
案例澳门：
YY = 10；
打破；
案例香港：
XX＝20；
YY = 5；
打破；
案例甘肃：
XX＝40；
YY = 30；
打破；
案例陕西：
XX＝5；
YY = 10；
打破；
案例内蒙古：
XX＝15；
YY = 65；
打破；
违约:
}
写入文本
中国{ } { } =状态中的r.text（XX，YY，中国{状态} { 'name' }）Attr（textattr）；
VAR设置=颜色{ ARR {我} }； / /得到相应的颜色
St.attr（{补：设置}）； / /填充背景色
ST { 0 }。onmouseover =函数（）{
st.animate（{补：# FDD
中国{状态} { }中的向前（）；
R.safari（）；
}；
ST { 0 }。onmouseout=函数（）{
st.animate（{补：设置、中风：# EEE}，500）；
中国{状态} { }中的向前（）；
R.safari（）；
}；
}）（中国国家} { } { 'path，状态）；
++；
}
}）；
}）；
在上面的代码中，我们使用VAR设置= { } } {我颜色数组，得到相应的色值，然后填入相应的省块st.attr（{补：设置}）。此外，该string2array（）函数将字符串转换成一个数组。
功能string2array（字符串）{
eval（var result =+得到（字符串））；
返回结果；
}
通过以上步骤，我们可以看到不同省份不同背景颜色的中国地图，根据不同的颜色可以区分不同省份的活跃用户数量，达到预期的目标，希望各位朋友这篇文章能帮助大家学习。
