其實這個地圖的腳本是我在網(wǎng)上找到，找了好多，發(fā)現(xiàn)這個用 Rapha?l 繪制的地圖功能最強，最好看，關(guān)鍵是兼容性也是最好的，支持所有瀏覽器，包括IE6
Rapha?l 官網(wǎng)：http://raphaeljs.com/ 相當(dāng)不錯的畫圖插件，有興趣的可以看看，支持IE6
地圖演示地址：http://www.5imvc.com/Rep/Map
先來看看原版的顯示效果
好看是好看，但是覺得怪怪的。。。就是沒有省份的文字，這東西要是給別人用估計會被罵的，考我們地理知識呢？
說實話，我地理稀爛，上面除了湖北，上海，北京幾個大城市，其他都不知道，哈哈，別噴我，還有就是，地圖中的澳門，北京，上海太小了，很難點擊
再來看看我修改后的效果圖
raphael.js --raphael的庫，畫圖就靠這個了
chinamapPath.js -- 中國地圖繪制
chinamap.js --對繪制的地圖增加事件和上色，綁定數(shù)據(jù)等操作
我只是對 chinamap.js 文件做了一點修改
首先，獲取每個區(qū)域的中心坐標(biāo)
//***獲取當(dāng)前圖形的中心坐標(biāo)var xx = st.getBBox().x + (st.getBBox().width / 2);var yy = st.getBBox().y + (st.getBBox().height / 2);
然后通過raphael中 Paper.text(x, y, text) 方法將文字增加到每個區(qū)域中間
//***寫入地名,并加點擊事件,部分區(qū)域太小，增加對文字的點擊事件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", "");});
有幾個省份中心坐標(biāo)不在內(nèi)部，所以文字會跑出去，所以還得最部分坐標(biāo)進行校正
//***修改部分地圖文字偏移坐標(biāo) 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 "內(nèi)蒙古": xx -= 15; yy += 65; break; default: }
最后把數(shù)據(jù)傳到前臺讓有數(shù)據(jù)的省區(qū)變色，用 china['湖北']['path'] 可以訪問到當(dāng)前raphael 的對象，使用變色方法顯示就OK了
周末一下發(fā)兩篇文章，好累，休息去咯，喜歡的話求推薦哦，有問題歡迎討論
http://download.csdn.net/detail/linfei721/5502961
