<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:200pxmargin-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：左上角Xy表示左上角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)
}
})
这个我曾经成功开发过，不过写插件就写了很久，太累人。部分代码看这里：http://www.idlepa.com/yezi/blog/?i=page&id=99/article.html如果这样还是不能理解，那推荐题主还是用插件来解决吧
