前段时间，因为项目需要找了很多网上资源关于深圳地图的，都不太理想。于是整理了一份适用于项目的交互地图供大家参考，提供思路。里面有个805.svg的文件是引用了里面的path标签的坐标值，应用到chinamapPath.js里面替换，后期可以实现交互数据绑定。如果想换成地区交互地图，可以先让设计师提供.svg格式的矢量图形，然后取里面的坐标值即可。在使用过程中，大家可以集思广益，举一反三进行优化完善。初步模型，不够精致，学习共勉。
html代码参考：
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript" src="chinamapPath.js"></script>
</head>
<body>
<div id="main">
<div class="demo">
<div id="map"></div>
</div>
</div>
<script type="text/javascript">
window.onload = function () {
var R = Raphael("map", 805, 350);
paintMap(R);
var textAttr = {
"fill": "#fff",//文字颜色
"font-size": "12px",
"cursor": "pointer"
};
for (var state in shenzhen) {
shenzhen[state]['path'].color = Raphael.getColor(0.9);
(function (st, state) {
//获取当前图形的中心坐标
var xx = st.getBBox().x + (st.getBBox().width / 2);
var yy = st.getBBox().y + (st.getBBox().height / 2);
//***修改部分地图文字偏移坐标
switch (shenzhen[state]['name']) {
case "龙华":
xx +=0;
yy -= 5;
break;
case "宝安区":
xx -=70;
yy += 20;
break;
case "南山区":
xx += 10;
yy += 10;
break;
case "蛇口":
xx += -10;
yy += 0;
break;
case "福田区":
xx -= 10;
break;
case "罗湖区":
yy -= 10;
break;
case "盐田区":
xx +=2;
yy -=5;
break;
case "龙岗区":
xx += 5;
yy += 10;
break;
case "坪大":
xx +=30;
yy -=30;
break;
default:
}
//写入文字
shenzhen[state]['text'] = R.text(xx, yy, shenzhen[state]['name']).attr(textAttr);
st[0].onmouseover = function () {
st.animate({fill: st.color, stroke: "#eee"}, 500);
shenzhen[state]['text'].toFront();
R.safari();
};
st[0].onmouseout = function () {
st.animate({fill: "#4CC2EA", stroke: "#eee"}, 500);
shenzhen[state]['text'].toFront();
R.safari();
};
})(shenzhen[state]['path'], state);
}
}
</script>
</body>
</html>
chinamapPath.js文件的关键贴码：
shenzhen.longhua = {
name: "龙华",
path: R.path("M294.403,153.232l-13.585,9.622c0,0-3.396,2.52,4.964,12.601l-0.783,3.665l-4.702,6.872l1.566,5.729l-0.261,8.705l7.315,2.292l0.783,7.56c0,0,13.585,8.247,13.848,9.164c0.261,0.915-6.793,10.081-6.793,10.081l-3.135,0.457l-0.785,1.833l-7.576-0.458l-3.919,0.687h-2.351h-5.747h-6.794c0,0-6.27,0.915-7.053,1.146c-0.785,0.229-4.442,2.062-4.442,2.062l0.522-11.226l-1.045-1.145c0,0-0.783-4.123-0.783-5.27c0-1.146,0-2.29-0.785-2.29c-0.783,0-5.747,0-5.747,0s-8.622-5.957-6.792-13.289c1.829-7.331-13.063-8.706-14.892-8.934c-1.828-0.229-0.26-7.562-3.396-7.562s-12.019-1.374-12.802-1.374c-0.783,0-6.53,2.29-6.792-2.749c-0.263-5.04-2.875-6.643-2.875-6.643s6.271-4.813,6.792-7.332c0.523-2.521-0.783-9.164-4.441-9.622c-3.657-0.459,4.703-15.809,4.964-16.496c0.261-0.687,6.793-8.706,6.793-8.706l-3.918-6.414c0,0-1.307-5.956-0.262-6.645c1.044-0.687,8.098-5.727,8.098-5.727s9.667,4.353,10.451,5.956c0.783,1.604,5.486,0.688,5.486,0.688l3.135,3.894l6.794-0.458l1.305-0.688l0.786,2.52l0.783,2.291l2.612,1.375l-0.522,5.041l-0.783,1.833l-0.523,5.499c0,0,9.667,7.33,10.451,7.33s5.486,3.895,5.486,3.895s16.458-4.582,18.288-5.269C283.169,147.046,292.574,149.108,294.403,153.232z").attr(attr)
};
.....完整案例的相关css文件和JS文件较多，可以移至资源下载目录进行下载。
