用 Raphaël 绘制中国地图 + 显示数据 – 林飞 – 博客园

前言
效果图
文件说明
修改内容
代码下载

前言

其实这个地图的脚本是我在网上找到，找了好多，发现这个用 Raphaël 绘制的地图功能最强，最好看，关键是兼容性也是最好的，支持所有浏览器，包括IE6

Raphaël 官网：http://raphaeljs.com/ 相当不错的画图插件，有兴趣的可以看看，支持IE6

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

效果图

先来看看原版的显示效果

好看是好看，但是觉得怪怪的。。。就是没有省份的文字，这东西要是给别人用估计会被骂的，考我们地理知识呢？

说实话，我地理稀烂，上面除了湖北，上海，北京几个大城市，其他都不知道，哈哈，别喷我，还有就是，地图中的澳门，北京，上海太小了，很难点击

再来看看我修改后的效果图

文件说明

raphael.js –raphael的库，画图就靠这个了

chinamapPath.js — 中国地图绘制

chinamap.js –对绘制的地图增加事件和上色，绑定数据等操作

修改内容

我只是对 chinamap.js 文件做了一点修改

首先，获取每个区域的中心坐标

<span style="color: #008000;">//</span><span style="color: #008000;">***获取当前图形的中心坐标</span></p><p><span style="color: #0000ff;">var</span> xx = st.getBBox().x + (st.getBBox().width / 2<span style="color: #000000;">);</p><p></span><span style="color: #0000ff;">var</span> yy = st.getBBox().y + (st.getBBox().height / 2);

然后通过raphael中 Paper.text(x, y, text) 方法将文字增加到每个区域中间

<span style="color: #008000;">//</span><span style="color: #008000;">***写入地名,并加点击事件,部分区域太小，增加对文字的点击事件</span></p><p>china[state]['text'] = R.text(xx, yy, china[state]['name']).attr(textAttr).click(<span style="color: #0000ff;">function</span><span style="color: #000000;"> () {</p><p>    clickMap();</p><p>}).hover(</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> () {</p><p>    </span><span style="color: #0000ff;">var</span> $sl = $("#topList").find("[title='" + china[state]['name'] + "']:not([select])"<span style="color: #000000;">);</p><p>    $sl.css(</span>"font-size", "20px"<span style="color: #000000;">);</p><p>}, </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> () {</p><p>    </span><span style="color: #0000ff;">var</span> $sl = $("#topList").find("[title='" + china[state]['name'] + "']:not([select])"<span style="color: #000000;">);</p><p>    $sl.css(</span>"font-size", ""<span style="color: #000000;">);</p><p>});</span>

有几个省份中心坐标不在内部，所以文字会跑出去，所以还得最部分坐标进行校正

<span style="color: #008000;">//</span><span style="color: #008000;">***修改部分地图文字偏移坐标</span></p><p>            <span style="color: #0000ff;">switch</span> (china[state]['name'<span style="color: #000000;">]) {</p><p>                </span><span style="color: #0000ff;">case</span> "江苏"<span style="color: #000000;">:</p><p>                    xx </span>+= 5<span style="color: #000000;">;</p><p>                    yy </span>-= 10<span style="color: #000000;">;</p><p>                    </span><span style="color: #0000ff;">break</span><span style="color: #000000;">;</p><p>                </span><span style="color: #0000ff;">case</span> "河北"<span style="color: #000000;">:</p><p>                    xx </span>-= 10<span style="color: #000000;">;</p><p>                    yy </span>+= 20<span style="color: #000000;">;</p><p>                    </span><span style="color: #0000ff;">break</span><span style="color: #000000;">;</p><p>                </span><span style="color: #0000ff;">case</span> "天津"<span style="color: #000000;">:</p><p>                    xx </span>+= 20<span style="color: #000000;">;</p><p>                    yy </span>+= 10<span style="color: #000000;">;</p><p>                    </span><span style="color: #0000ff;">break</span><span style="color: #000000;">;</p><p>                </span><span style="color: #0000ff;">case</span> "上海"<span style="color: #000000;">:</p><p>                    xx </span>+= 20<span style="color: #000000;">;</p><p>                    </span><span style="color: #0000ff;">break</span><span style="color: #000000;">;</p><p>                </span><span style="color: #0000ff;">case</span> "广东"<span style="color: #000000;">:</p><p>                    yy </span>-= 10<span style="color: #000000;">;</p><p>                    </span><span style="color: #0000ff;">break</span><span style="color: #000000;">;</p><p>                </span><span style="color: #0000ff;">case</span> "澳门"<span style="color: #000000;">:</p><p>                    yy </span>+= 10<span style="color: #000000;">;</p><p>                    </span><span style="color: #0000ff;">break</span><span style="color: #000000;">;</p><p>                </span><span style="color: #0000ff;">case</span> "香港"<span style="color: #000000;">:</p><p>                    xx </span>+= 20<span style="color: #000000;">;</p><p>                    yy </span>+= 5<span style="color: #000000;">;</p><p>                    </span><span style="color: #0000ff;">break</span><span style="color: #000000;">;</p><p>                </span><span style="color: #0000ff;">case</span> "甘肃"<span style="color: #000000;">:</p><p>                    xx </span>-= 40<span style="color: #000000;">;</p><p>                    yy </span>-= 30<span style="color: #000000;">;</p><p>                    </span><span style="color: #0000ff;">break</span><span style="color: #000000;">;</p><p>                </span><span style="color: #0000ff;">case</span> "陕西"<span style="color: #000000;">:</p><p>                    xx </span>+= 5<span style="color: #000000;">;</p><p>                    yy </span>+= 20<span style="color: #000000;">;</p><p>                    </span><span style="color: #0000ff;">break</span><span style="color: #000000;">;</p><p>                </span><span style="color: #0000ff;">case</span> "内蒙古"<span style="color: #000000;">:</p><p>                    xx </span>-= 15<span style="color: #000000;">;</p><p>                    yy </span>+= 65<span style="color: #000000;">;</p><p>                    </span><span style="color: #0000ff;">break</span><span style="color: #000000;">;</p><p>                </span><span style="color: #0000ff;">default</span><span style="color: #000000;">:</p><p>            }</span>

View Code

最后把数据传到前台让有数据的省区变色，用 china[‘湖北’][‘path’] 可以访问到当前raphael 的对象，使用变色方法显示就OK了

周末一下发两篇文章，好累，休息去咯，喜欢的话求推荐哦，有问题欢迎讨论

代码下载

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

来源URL：http://www.cnblogs.com/linfei721/archive/2013/06/02/3114174.html