最近的數(shù)據(jù)統(tǒng)計項目中要用到中國地圖，也就是在地圖上動態(tài)的顯示某個時間段某個省份地區(qū)的統(tǒng)計數(shù)據(jù)，我們不需要flash，僅僅依靠raphael.js以及SVG圖像就可以完成地圖的交互操作。在本文中，我給大家分享如何使用js來完成地圖交互。

先簡單介紹下raphael.js，raphael.js是一個很小的javascript庫，它可以在網(wǎng)頁中實現(xiàn)繪制各種矢量圖、各類圖表、以及圖像裁剪、旋轉、運動動畫等等功能。此外raphael.js還跨瀏覽器兼容，而且還兼容老掉牙的IE6啊。raphael.js的官網(wǎng)地址： http://raphaeljs.com/

準備工作

我們需要準備一張矢量地圖，可以從網(wǎng)上找一張矢量地圖，或者使用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 = { 
        //格式同上 
    }; 
} 

以上是我們將準備好的地圖路徑信息封裝到()函數(shù)中，并保存文件名為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。

復制代碼代碼如下:

JAVASCRIPT

首先我們在頁面中調用地圖，方法如下：

復制代碼代碼如下:

window.onload = function () { 
    //繪制地圖 
    var R = Raphael("map", 600, 500);//將地圖載入到id為map的div中，并設置區(qū)域為600x500px大小。 
    paintMap(R); 
} 

這個時候我們用瀏覽器打開會顯示載入后的地圖。接下來我們要給地圖中的對應的省份區(qū)域加上省份名稱，以及鼠標滑向每個省份區(qū)塊時的變色動畫效果。

復制代碼代碼如下:

 
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 "內(nèi)蒙古": 
                    xx -= 15; 
                    yy += 65; 
                    break; 
                default: 
            } 
            ... 
      })(china[state]['path'], state); 
   } 
} 