正如上一篇文章所说，需要一个地图。所以就上网查找是否有合适的js库。最后发现了raphael.js，官网为：http://raphaeljs.com/

raphaelJs是一个很小的javascript库，大小不到100K。但可以在网页中实现绘制各种矢量图、各类图表、以及图像裁剪、旋转、运动动画等等功能。更加令人惊喜的是，跨浏览器兼容它竟然支持到了IE6。瞬间膜拜。

使用raphaelJs实现的中国地图效果图如下：

首先的准备工作是要由一份中国地图的矢量图，然后通过AI导出为SVG格式的文件。通过浏览器可以打开该文件，提取其中的path信息并封装起来:

var china = []; 
 
function paintMap(R) { 
    var attr = { 
        "fill": "#97d6f5", 
        "stroke": "#eee", 
        "stroke-width": 1, 
        "stroke-linejoin": "round" 
    }; 
 
    china.aomen = { 
        name: "澳门", 
        path: R.path("M413.032,.........省略若干......... ,414.183z").attr(attr) 
    } 
    china.hk = { 
        //格式同上 
    }; 
}

html：

//引入js
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript" src="chinamapPath.js"></script>

<div id="map"></div>

window.onload = function () {
var R = Raphael("map", 600, 500);
//调用绘制地图方法
paintMap(R);

for (var state in china) {
    (function (st, state) {
        st[0].onmouseover = function () {//鼠标滑向
            st.animate({fill: st.color, stroke: "#eee"}, 500);
            R.safari();
        };
        st[0].onmouseout = function () {//鼠标离开
            st.animate({fill: "#97d6f5", stroke: "#eee"}, 500);
            R.safari();
        };
    })(china[state]['path'], state);
}
}

当然，raphael还有很多强大的功能，官网上文档也比较齐全。好东西，先mark之