最近的數據統計項目中要用到中國地圖，也就是在地圖上動態的顯示某個時間段某個省份地區的統計數據，我們不需要flash，僅僅依靠raphael.js以及SVG圖像就可以完成地圖的交互操作。在本文中，我給大家分享如何使用js來完成地圖交互。
先簡單介紹下raphael.js，raphael.js是一個很小的javascript庫，它可以在網頁中實現繪製各種矢量圖、各類圖表、以及圖像裁剪、旋轉、運動動畫等等功能。此外raphael.js還跨瀏覽器兼容，而且還兼容老掉牙的IE6啊。 raphael.js的官網地址： http://raphaeljs.com/
準備工作
我們需要準備一張矢量地圖，可以從網上找一張矢量地圖，或者使用illustrator繪製一份矢量地圖，然後導出為SVG格式的文件，這個文件可以在瀏覽器上打開，然後提取裡面的path路徑信息（M開頭的坐標）。並將path路徑信息，按照chinamapPath.js的格式準備好地圖路徑信息。
複製代碼代碼如下:
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 = {
//格式同上
};
}
以上是我們將準備好的地圖路徑信息封裝到()函數中，並保存文件名為chinamapPath.js，供後面調用。
HTML
首先在head部分載入raphael.js庫文件和chinamapPath.js路徑信息文件。
複製代碼代碼如下:
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript" src="chinamapPath.js"></script>
然後在body中需要放置地圖的位置放置div#map。
複製代碼代碼如下:
<div id="map"></div>
JAVASCRIPT
首先我們在頁面中調用地圖，方法如下：
複製代碼代碼如下:
window.onload = function () {
//繪製地圖
var R = Raphael("map", 600, 500);//將地圖載入到id為map的div中，並設置區域為600x500px大小。
paintMap(R);
}
這個時候我們用瀏覽器打開會顯示載入後的地圖。接下來我們要給地圖中的對應的省份區域加上省份名稱，以及鼠標滑向每個省份區塊時的變色動畫效果。
複製代碼代碼如下:
window.onload = function () {
var R = Raphael("map", 600, 500);
//調用繪製地圖方法
paintMap(R);
var textAttr = {
"fill": "#000",
"font-size": "12px",
"cursor": "pointer"
};
for (var state in china) {
china[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);
//寫入文字
china[state]['text'] = R.text(xx, yy, china[state]['name']).attr(textAttr);
st[0].onmouseover = function () {//鼠標滑向
st.animate({fill: st.color, stroke: "#eee"}, 500);
china[state]['text'].toFront();
R.safari();
};
st[0].onmouseout = function () {//鼠標離開
st.animate({fill: "#97d6f5", stroke: "#eee"}, 500);
china[state]['text'].toFront();
R.safari();
};
})(china[state]['path'], state);
}
}
以上代碼中運用了raphael提供的方法有：getColor，getBBox，animate，toFront等等，這些可以在raphael文檔中找到使用說明，本文不在講述。
此外由於地圖尺寸原因，有些省份名稱在地圖中的顯示位置不恰當，需要修正偏移量，這樣看起來舒服點。
複製代碼代碼如下:
window.onload = function () {
var R = Raphael("map", 600, 500);
...
for (var state in china) {
...
(function (st, state) {
....
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:
}
...
})(china[state]['path'], state);
}
}