对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