<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)
}
})
当时遇到这个地图也是花了一些功夫解决了点击跳转的需求，当时是实现了效果，但没有优化，提供给你参考。
这个地图插件依据浏览器不同，生成的地图代码不同，建议多测试一下。
在脚本最后注释的那个 alert就是click事件，自行替换即可。
实际的参考网站在百度发不出来地址，需要可以私信我。
//数据可以动态生成，格式自己定义，cha对应china-zh.js中省份的简称var dataStatus = [{ cha: 'HKG', name: '香港', des: '' },
{ cha: 'HAI', name: '海南', des: '' },
{ cha: 'YUN', name: '云南', des: '<br/>' },
{ cha: 'BEJ', name: '北京', des: '<br/>' },
{ cha: 'TAJ', name: '天津', des: '<br/>' },
{ cha: 'XIN', name: '新疆', des: '' },
{ cha: 'TIB', name: '西藏', des: '' },
{ cha: 'QIH', name: '青海', des: '' },
{ cha: 'GAN', name: '甘肃', des: '<br/>' },
{ cha: 'NMG', name: '内蒙古', des: '<br/>' },
{ cha: 'NXA', name: '宁夏', des: '<br/>' },
{ cha: 'SHX', name: '山西', des: '<br/>' },
{ cha: 'LIA', name: '辽宁', des: '<br/>' },
{ cha: 'JIL', name: '吉林', des: '<br/>' },
{ cha: 'HLJ', name: '黑龙江', des: '<br/>' },
{ cha: 'HEB', name: '河北', des: '<br/>' },
{ cha: 'SHD', name: '山东', des: '<br/>' },
{ cha: 'HEN', name: '河南', des: '<br/>' },
{ cha: 'SHA', name: '陕西', des: '' },
{ cha: 'SCH', name: '四川', des: '<br/>' },
{ cha: 'CHQ', name: '重庆', des: '' },
{ cha: 'HUB', name: '湖北', des: '<br/>' },
{ cha: 'ANH', name: '安徽', des: '<br/>' },
{ cha: 'JSU', name: '江苏', des: '<br/>' },
{ cha: 'SHH', name: '上海', des: '' },
{ cha: 'ZHJ', name: '浙江', des: '<br/>' },
{ cha: 'FUJ', name: '福建', des: '' },
{ cha: 'TAI', name: '台湾', des: '' },
{ cha: 'JXI', name: '江西', des: '' },
{ cha: 'HUN', name: '湖南', des: '' },
{ cha: 'GUI', name: '贵州', des: '' },
{ cha: 'GXI', name: '广西', des: '<br/>' },
{ cha: 'GUD', name: '广东', des: '<br/>'}]
$('#container').vectorMap({ map: 'china_zh',
color: "#95cee9", //地图颜色
onLabelShow: function (event, label, code) {//动态显示内容
$.each(dataStatus, function (i, items) {
if (code == items.cha) {
label.html(items.name + items.des)
}
})
}
})
var hasNum = new Array()
$.each(dataStatus, function (i, items) {
if (items.des.indexOf('br') != -1) {//动态设定颜色，此处用了自定义简单的判断
var josnStr = "{" + items.cha + ":'#1c84b7'}"
hasNum.push(items.cha)
$('#container').vectorMap('set', 'colors', eval('(' + josnStr + ')'))
}
})
$('.jvectormap-zoomin').click() //放大
$('#container').find("*[id*='jvectormap1']").each(function(){
var _this = $(this)
var _thisid = $(this).attr('id')
for (var i=0 i<hasNum.length i++){
if(_thisid.indexOf(hasNum[i]) != -1){
_this.click(function(){
//alert(_thisid)
})
}
}
})
