用 Raphaël 繪制中國地圖 + 顯示數據

目錄

1. 前言
2. 效果圖
3. 文件說明
4. 修改內容
5. 代碼下載

前言

其實這個地圖的腳本是我在網上找到，找了好多，發現這個用 Raphaël 繪制的地圖功能最強，最好看，關鍵是兼容性也是最好的，支持所有瀏覽器，包括IE6

Raphaël 官網：http://raphaeljs.com/ 相當不錯的畫圖插件，有興趣的可以看看，支持IE6

地圖演示地址：http://www.5imvc.com/Rep/Map

效果圖

先來看看原版的顯示效果

好看是好看，但是覺得怪怪的。。。就是沒有省份的文字，這東西要是給別人用估計會被罵的，考我們地理知識呢？

說實話，我地理稀爛，上面除了湖北，上海，北京幾個大城市，其他都不知道，哈哈，別噴我，還有就是，地圖中的澳門，北京，上海太小了，很難點擊

再來看看我修改后的效果圖

 

文件說明

raphael.js --raphael的庫，畫圖就靠這個了

chinamapPath.js -- 中國地圖繪制

chinamap.js   --對繪制的地圖增加事件和上色，綁定數據等操作

修改內容

我只是對 chinamap.js 文件做了一點修改

首先，獲取每個區域的中心坐標

//***獲取當前圖形的中心坐標
var xx = st.getBBox().x + (st.getBBox().width / 2);
var yy = st.getBBox().y + (st.getBBox().height / 2);

然后通過raphael中 Paper.text(x, y, text) 方法將文字增加到每個區域中間

//***寫入地名,並加點擊事件,部分區域太小，增加對文字的點擊事件
china[state]['text'] = R.text(xx, yy, china[state]['name']).attr(textAttr).click(function () {
    clickMap();
}).hover(function () {
    var $sl = $("#topList").find("[title='" + china[state]['name'] + "']:not([select])");
    $sl.css("font-size", "20px");
}, function () {
    var $sl = $("#topList").find("[title='" + china[state]['name'] + "']:not([select])");
    $sl.css("font-size", "");
});

有幾個省份中心坐標不在內部，所以文字會跑出去，所以還得最部分坐標進行校正

//***修改部分地圖文字偏移坐標
            switch (china[state]['name']) {
                case "江蘇":
                    xx += 5;
                    yy -= 10;
                    break;
                case "河北":
                    xx -= 10;
                    yy += 20;
                    break;
                case "天津":
                    xx += 20;
                    yy += 10;
                    break;
                case "上海":
                    xx += 20;
                    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 += 20;
                    break;
                case "內蒙古":
                    xx -= 15;
                    yy += 65;
                    break;
                default:
            }

最后把數據傳到前台讓有數據的省區變色，用 china['湖北']['path'] 可以訪問到當前raphael 的對象，使用變色方法顯示就OK了

 周末一下發兩篇文章，好累，休息去咯，喜歡的話求推薦哦，有問題歡迎討論

代碼下載

http://download.csdn.net/detail/linfei721/5502961