準(zhǔn)備工作

我們需要準(zhǔn)備一張矢量地圖，可以從網(wǎng)上找一張矢量地圖，或者使用illustrator繪制一份矢量地圖，然后導(dǎo)出為SVG格式的文件，這個(gè)文件可以在瀏覽器上打開(kāi)，然后提取里面的path路徑信息（M開(kāi)頭的坐標(biāo)）。并將path路徑信息，按照chinamapPath.js的格式準(zhǔn)備好地圖路徑信息。

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

以上是我們將準(zhǔn)備好的地圖路徑信息封裝到()函數(shù)中，并保存文件名為chinamapPath.js，供后面調(diào)用。

HTML

首先在head部分載入raphael.js庫(kù)文件和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

首先我們?cè)陧?yè)面中調(diào)用地圖，方法如下：

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

這個(gè)時(shí)候我們用瀏覽器打開(kāi)會(huì)顯示載入后的地圖。接下來(lái)我們要給地圖中的對(duì)應(yīng)的省份區(qū)域加上省份名稱(chēng)，以及鼠標(biāo)滑向每個(gè)省份區(qū)塊時(shí)的變色動(dòng)畫(huà)效果。

window.onload = function () { 
    var R = Raphael("map", 600, 500); 
    //調(diào)用繪制地圖方法 
    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) { 
             
            //獲取當(dāng)前圖形的中心坐標(biāo) 
            var xx = st.getBBox().x + (st.getBBox().width / 2); 
            var yy = st.getBBox().y + (st.getBBox().height / 2); 
             
            //寫(xiě)入文字 
            china[state]['text'] = R.text(xx, yy, china[state]['name']).attr(textAttr); 
             
            st[0].onmouseover = function () {//鼠標(biāo)滑向 
                st.animate({fill: st.color, stroke: "#eee"}, 500); 
                china[state]['text'].toFront(); 
                R.safari(); 
            }; 
            st[0].onmouseout = function () {//鼠標(biāo)離開(kāi) 
                st.animate({fill: "#97d6f5", stroke: "#eee"}, 500); 
                china[state]['text'].toFront(); 
                R.safari(); 
            }; 
                     
         })(china[state]['path'], state); 
    } 
} 

以上代碼中運(yùn)用了raphael提供的方法有：getColor，getBBox，animate，toFront等等，這些可以在raphael文檔中找到使用說(shuō)明，本文不在講述。

此外由于地圖尺寸原因，有些省份名稱(chēng)在地圖中的顯示位置不恰當(dāng)，需要修正偏移量，這樣看起來(lái)舒服點(diǎn)。

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 "澳門(mén)": 
                    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); 
   } 
} 

這樣一個(gè)基本的地圖效果就完成了，接下來(lái)我們要介紹結(jié)合jquery，PHP+MySQL讀取數(shù)據(jù)到地圖中來(lái)，并實(shí)現(xiàn)基本的動(dòng)態(tài)加載數(shù)據(jù)和交互功能