目录
前言
其实这个地图的脚本是我在网上找到,找了好多,发现这个用 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
相关推荐
本人网上找的代码,进过修改增加了省区文字 演示地址:http://www.5imvc.com/Rep/Map
NULL 博文链接:https://justcoding.iteye.com/blog/665253
可视化流程设计器,基于jQuery和Raphaël ,兼容性强,使用方便,扩展性强。经过一夜的努力反编译了一位大神的代码,整理了整体思路并添加注释。 具体描述可在我博客中找到。 10分确实有点贵,但是绝对超值,而且我...
NULL 博文链接:https://justcoding.iteye.com/blog/1618691
NULL 博文链接:https://love-66521.iteye.com/blog/1974593
Raphaël 是一个小型 JavaScript 库,它可以简化您在网络上使用矢量图形的工作。 例如,如果您想创建自己的特定图表或图像裁剪和旋转小部件,您可以使用此库轻松轻松地实现它。 Raphaël ['ræfeɪəl] 使用 SVG W3C...
raphael.boolean.js-使用Raphaël执行布尔运算 该插件为javascript矢量库Raphaël( )提供了布尔操作。 您可以使用单个元素(而不是集合)来执行 联合[A + B | A或B] 差异[A-B | A NOT B] 交集[A * B | A和B] ...
该项目的目的是通过绘制椭圆曲线组成的点来帮助更好地理解这项技术。 此外,添加点的过程是可视化的。 作为一个教育项目, eccplot不打算为生产用例提供应用密码学。 所使用的技术栈由 HTML、JavaScript、CSS 和...
RaphaëlVarane新标签页扩展程序为您的Chrome浏览器带来了新外观。 安装RaphaëlVarane New Tab Theme,并欣赏RaphaëlVarane的精选高清图片。 它带有一些很酷的属性,这些属性可以改善您的“新标签页”体验,例如:...
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you ...
Raphaël.js 是一个小型的 JavaScript 库,用来简化在页面上显示向量图的工作。你可以用它在页面上绘制各种图表、并进行图片的剪切、旋转等操作。 Raphaël.js 使用SVG W3C推荐标准和VML作为创建图形的基础。
它基于Raphaël库进行矢量绘图。 入门 安装Justgage就像... bower install justgage-official 或您想使用NPM ... npm install justgage --save 示例 或者您可以随时下载CSS和JS文件... <!-- Raphael must ...
使用漂亮的SVG库生成svg数据。 特征 使用Raphael的静态svg生成 安装 npm install node-raphael 动机 NIH-不是在这里发明的...不好意思..我想在不使用客户端的情况下生成一些美观的图表(因为这对于非交互式图像来说...
Raphaël Hertzog and Roland Mas had the required qualities and managed to create and update this book. I thank them very much for their work and have no doubt that reading this book will be both ...
特此授予任何人免费获得本软件和相关文档文件(“软件”)副本的许可,不受限制地处理本软件,包括但不限于使用、复制、修改、合并的权利、发布、分发、再许可和/或出售软件的副本,并允许向其提供软件的人员这样做...
使用xdot格式的文本创建一个新的 XDotParser 对象,解析它,然后绘制它。 var graph = new XDotParser ( text ) . parse ( ) ; graph . draw ( ) ; 或者,您可以通过 AJAX 获取xdot数据。 $ . get ( 'graph....
#RaphaëlLustin的个人页面
RaphaëlBOICHOT 策展人:Brian Khuu 该脚本的作者是RaphaëlBOICHOT,并且在他的允许下被发布在了这里。 具有电子纸功能的游戏男孩打印机模拟器(CrapPrinter)代码在Matlab中运行非常快,而在Octave中则运行缓慢。...
拼字游戏:RaphaëlRosinski,Aleandre Rafanel和AlexandrePrévot制作的拼字游戏
同时,JQTouch的创始人David Kaneda,以及Raphaël的创始人也已加盟Sencha团队。“在未来的几个月内,我们的合作将会创造出令人惊叹的新东西来。不会等太久的,我保证!”Sencha的CEO Abraham Elias如是说。 ...