最近的數據統計項目中要用到中國地圖，也就是在地圖上動態的顯示某個時間段某個省份地區的統計數據，我們不需要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); 
   } 
} 
    

?

這樣一個基本的地圖效果就完成了，接下來我們要介紹結合jquery，PHP+MySQL讀取數據到地圖中來，并實現基本的動態加載數據和交互功能，敬請關注helloweba.com下期文章介紹。

?

來源于 helloweba.com 》 使用raphael.js繪制中國地圖

?