对Raphael画图标的一个jquery简单封装
公司要做一个项目的demo，要求地图上可以插红旗，所以就用到了Raphael。
因为是个demo，所以地图就用了一张图片，效果如下：
所以为了更好的封装一下这个功能，就写了一个简单的插件：jquery-pointpainter.js
/** * @author Lee<br> * @since 2013-8-19 <br> */ (function($, Raphael) { $.fn.pointpainter = function(options, params) { if ( typeof options == 'string') { if (options == 'setPoint' && params) { setPoint.call(this, params); } return this; } var opts = $.extend(true, {}, $.fn.pointpainter.defaults, options); return this.each(function() { $(this).data('pointpainter.opts', opts); _init.call($(this)); }); } //初始化画布 function _init() { var opts = this.data('pointpainter.opts'); this.dblclick(function(evt) { var offset = $(this).offset(); var point = { x : evt.pageX - offset.left, y : evt.pageY - offset.top }; opts.onMapDblClick.call(this, evt, point); }); var paper = Raphael(this[0], opts.width || this.width(), opts.height || this.height()); this.data('pointpainter.paper', paper); drawing.call(this); } //开始画图 function drawing() { var opts = this.data('pointpainter.opts'); var paper = this.data('pointpainter.paper'); paper.clear(); for (var i = 0; i < opts.points.length; i++) { var point = opts.points[i]; paper.path(opts.icon).attr({ fill : point.fill, stroke : opts.stroke, cursor : opts.cursor }).transform('t' + (point.x + opts.position.left) + ',' + (point.y + opts.position.top)).click(function() { opts.onIconClick.call(this, this.data()); }).hover(function(evt) { opts.onIconMouseOver.call(this, evt, this.data()); }, function(evt) { opts.onIconMouseOut.call(this, evt, this.data()); }).data(point.data); } } //添加绘画点 function setPoint(points) { var opts = this.data('pointpainter.opts'); opts.points.push(points); drawing.call(this); } $.fn.pointpainter.defaults = { //图标 icon : 'M9.5,3V13C17.5,13,17.5,17,25.5,17V7C17.5,7,17.5,3,9.5,3ZM6.5,29H8.5V3H6.5V29Z', //图标颜色 fill : 'green', stroke : "none", //图标的cursor cursor : 'pointer', //画布宽度和高度，默认为绑定元素的宽度和高度 width : 0, height : 0, //初始化默认坐标点 points : [{ x : 0, y : 0, data : {}//data为绑定到图标的数据，可以在onIconMouseOver和onIconMouseOut事件中获取 }], //定义图标位置，图标位置是以坐标点为基准的定位 position : { left : -7, top : -26, }, onIconMouseOver : $.noop, onIconMouseOut : $.noop, onMapDblClick : $.noop, //双击地图时触发的事件，两个参数，第一个为事件对象，第二个为所点击的点相对于地图的位置 onIconClick : $.noop//点击图标事件，两个参数，第一个为点，第二个为该点绑定的数据 } })(jQuery, Raphael);
再给个调用的例子：
var points=[ {x:193,y:176,fill:'red',data:{name:'济南市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}}, {x:108,y:193,fill:'green',data:{name:'聊城市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}}, {x:309,y:354,fill:'green',data:{name:'临沂市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}}, {x:371,y:172,fill:'yellow',data:{name:'潍坊市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}}, {x:484,y:241,fill:'red',data:{name:'青岛市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}}, {x:569,y:83,fill:'green',data:{name:'烟台市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}}, {x:629,y:84,fill:'red',data:{name:'威海市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}}, {x:218,y:380,fill:'green',data:{name:'枣庄市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}}, {x:158,y:310,fill:'yellow',data:{name:'济宁市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}}, {x:58,y:326,fill:'green',data:{name:'菏泽市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}}, {x:208,y:227,fill:'red',data:{name:'泰安市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}}, {x:252,y:224,fill:'yellow',data:{name:'莱芜市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}}, {x:413,y:316,fill:'green',data:{name:'日照市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}}, {x:286,y:161,fill:'yellow',data:{name:'淄博市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}}, {x:138,y:86,fill:'green',data:{name:'德州市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}}, {x:286,y:94,fill:'yellow',data:{name:'滨州市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}}, {x:326,y:82,fill:'green',data:{name:'东营市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}} ] $('#container').pointpainter({ points : points, onIconClick : function(data) { window.location.href = "sjxmfbgl.html"; }, onMapDblClick : function(evt, point) { console.log('x:' + point.x + ',y:' + point.y + ','); $(this).pointpainter('setPoint', point); }, onIconMouseOver : function(evt, data) { var offset = { top : evt.clientY, left : evt.clientX }; var content = '项目名称：' + data.projectName + '<br>项目期数：' + data.period + '<br>立项日期：' + data.date + '<br>财政结算：' + data.money + '<br>项目内容：' + data.content + '<br>预计完工日期：' + data.complateDate; $('#pointTip').empty().html(content).show().offset(offset); }, onIconMouseOut :function(){$('#pointTip').hide();} });
各式各样的图标可以从http://raphaeljs.com/icons/获取，点击图标之后，下方会显示该点击图标的值，默认为小红旗：M9.5,3v10c8,0,8,4,16,4V7C17.5,7,17.5,3,9.5,3z M6.5,29h2V3h-2V29z
欢迎大家拍砖^_^
2013-08-21
下载地址：http://pan.baidu.com/share/link?shareid=3942623987&uk=641094506&third=15
