1.首先導入各種js包：
<script type="text/javascript" src="../js/chinamapPath.js"></script>
<script type="text/javascript" src="../js/raphael.js"></script>
<script type="text/javascript" src="../js/g.raphael-min.js"></script>
<script type="text/javascript" src="../js/g.pie-min.js"></script>
<script type="text/javascript" src="../js/g.bar-min.js"></script>
2. 添加頁面部分代碼
<div id="china_map" style="margin-left:200px; margin-top:40px"></div>
3. 繪製地圖部分代碼：
$(function() {
Raphael.getColor.reset(); //色譜重置回紅色
//創建一個畫布對象用來繪製。你必須第一步就這麼做，該實例將來調用的所有繪圖方法都被綁定到這個畫布。
var R = Raphael("china_map", 600, 500);
//調用繪製地圖方法
paintMap(R);
var current = null;
//用於對鼠標點擊次數的計數；
var result = 0;
//判斷兩次點擊的區域名字的標誌量；
var nameFlag = "";
var x=0;
var y=0;
var textAttr = {
"fill": "#000",
"font-size": "13px",
"cursor": "pointer" //光標的CSS類型,指針類型；
};
for (var state in china) {//state代表每個省，即就是用每個或區域來遍歷整個地圖區域；
//Raphael.getColor(0.9):每次調用返回色譜中的下一個顏色(返回顏色的十六進制表示)
china[state]['path'].color = Raphael.getColor(0.9);//分省區域着色
china[state]['path'].transform("t30,0");//地圖的每個省的路徑橫向平移座標（30px,0px）
(function (st, state) {
//獲取每個區域的中心座標（getBBox()：返回指定元素的邊界框，x：左上角X; y表示左上角y）
var xx = st.getBBox().x + (st.getBBox().width / 2);
var yy = st.getBBox().y + (st.getBBox().height / 2);
//***修改部分地圖文字偏移座標
switch (china[state]['name']) {
case "江蘇":
xx += 5;
yy -= 10;
break;
case "河北":
xx -= 10;
yy += 20;
break;
case "天津":
xx += 10;
yy += 10;
break;
case "上海":
xx += 10;
break;
case "廣東":
yy -= 10;
break;
case "澳門":
yy += 10;
break;
case "香港":
xx += 20;
yy += 5;
break;
case "甘肅":
xx -= 40;
yy -= 30;
break;
case "陝西":
xx += 5;
yy += 10;
break;
case "內蒙古":
xx -= 15;
yy += 65;
break;
default:
}
//***寫入地名,並加點擊事件,部分區域太小，增加對文字的點擊事件
//R.text(xx, yy, china[state]['name'])給地圖區域的中心位置添加省的名字
china[state]['text'] = R.text(xx, yy, china[state]['name']).attr(textAttr).click(function () {
if(result<1){ //第一次點擊這個區域
nameFlag = china[state]['name'];
clickMap();
controlChinaMap();
result += 1;
}else if(result>=1 && (nameFlag == china[state]['name'])){//第N此點擊，判斷是不是同一個點擊區域
clickMap();
}else{
clickMap();
controlChinaMap();
china[state]['text'] = R.text(xx, yy, nameFlag).attr(textAttr).click(function (){
clickMap();
});
}
});
//圖形的點擊事件(st[0]表示一個SVGPathElement對象)
$(st[0]).click(function (e) {
if(result<1){ //第一次點擊這個區域
x = xx;
y = yy;
nameFlag = china[state]['name'];
clickMap();
controlChinaMap();
result += 1;
}else if(result>=1 && (nameFlag == china[state]['name'])){//第N此點擊，判斷是不是同一個點擊區域
clickMap();
}else{
clickMap();
R.barchart(x,y-150,50,200,[0],{type:"round"});
controlChinaMap();
}
});
st[0].onmouseover = function () {
st.animate({fill: st.color, stroke: "#eee"}, 500);//爲地圖區域創建動畫，鼠標滑過區域顏色加深，持續時間500毫秒
china[state]['text'].toFront();//元素上移
R.safari();//處理渲染錯誤
};
st[0].onmouseout = function () {
st.animate({fill: "#97d6f5", stroke: "#eee"}, 500);
china[state]['text'].toFront();
R.safari();
};
function clickMap() {
if (current == state) //判斷兩次點擊是否點擊的是同一個區域
return;
//重置上次點擊的圖形
current && china[current]['path'].animate({ transform: "t30,0", fill: china[current]['isClick'] ? china[current]['path'].color : "#b0d0ec", stroke: "#ddd" }, 2000, "elastic");
current = state; //將當前值賦給變量
//對本次點擊
china[state]['path'].animate({ transform: "t30,0 s1.03 1.03", fill: china[state]['path'].color, stroke: "#000" }, 1200, "elastic");
st.toFront(); //向上
R.safari();
china[current]['text'].toFront(); //***向上
if (china[current] === undefined) return;
}
function controlChinaMap(){
//type默認是square，還有sharp、soft
R.barchart(xx,yy-150,50,200,[5,4,3,2,1],{type:"round"});
//在你的圖上面加一個註釋
//R.blob(xx,yy-130, "25%", 50);
}
})(china[state]['path'], state);
}
});
4. 繪製好的圖片如下圖片所示
