公司要做一个项目的demo，要求地图上可以插红旗，所以就用到了Raphael。

因为是个demo，所以地图就用了一张图片，效果如下：

所以为了更好的封装一下这个功能，就写了一个简单的插件：jquery-pointpainter.js

  1. /**
  2.  * @author Lee<br>
  3.  * @since 2013-8-19 <br>
  4.  */
  5. (function($, Raphael) {
  6.     $.fn.pointpainter = function(options, params) {
  7.         if ( typeof options == 'string') {
  8.             if (options == 'setPoint' && params) {
  9.                 setPoint.call(this, params);
  10.             }
  11.             return this;
  12.         }
  13.  
  14.         var opts = $.extend(true, {}, $.fn.pointpainter.defaults, options);
  15.         return this.each(function() {
  16.             $(this).data('pointpainter.opts', opts);
  17.             _init.call($(this));
  18.         });
  19.     }
  20.     //初始化画布
  21.     function _init() {
  22.         var opts = this.data('pointpainter.opts');
  23.         this.dblclick(function(evt) {
  24.             var offset = $(this).offset();
  25.             var point = {
  26.                 x : evt.pageX - offset.left,
  27.                 y : evt.pageY - offset.top
  28.             };
  29.             opts.onMapDblClick.call(this, evt, point);
  30.         });
  31.  
  32.         var paper = Raphael(this[0], opts.width || this.width(), opts.height || this.height());
  33.         this.data('pointpainter.paper', paper);
  34.         drawing.call(this);
  35.     }
  36.  
  37.     //开始画图
  38.     function drawing() {
  39.         var opts = this.data('pointpainter.opts');
  40.         var paper = this.data('pointpainter.paper');
  41.         paper.clear();
  42.         for (var i = 0; i < opts.points.length; i++) {
  43.             var point = opts.points[i];
  44.             paper.path(opts.icon).attr({
  45.                 fill : point.fill,
  46.                 stroke : opts.stroke,
  47.                 cursor : opts.cursor
  48.             }).transform('t' + (point.x + opts.position.left) + ',' + (point.y + opts.position.top)).click(function() {
  49.                 opts.onIconClick.call(this, this.data());
  50.             }).hover(function(evt) {
  51.                 opts.onIconMouseOver.call(this, evt, this.data());
  52.             }, function(evt) {
  53.                 opts.onIconMouseOut.call(this, evt, this.data());
  54.             }).data(point.data);
  55.         }
  56.     }
  57.  
  58.     //添加绘画点
  59.     function setPoint(points) {
  60.         var opts = this.data('pointpainter.opts');
  61.         opts.points.push(points);
  62.         drawing.call(this);
  63.     }
  64.  
  65.     $.fn.pointpainter.defaults = {
  66.         //图标
  67.         icon : 'M9.5,3V13C17.5,13,17.5,17,25.5,17V7C17.5,7,17.5,3,9.5,3ZM6.5,29H8.5V3H6.5V29Z',
  68.         //图标颜色
  69.         fill : 'green',
  70.         stroke : "none",
  71.         //图标的cursor
  72.         cursor : 'pointer',
  73.  
  74.         //画布宽度和高度，默认为绑定元素的宽度和高度
  75.         width : 0,
  76.         height : 0,
  77.  
  78.         //初始化默认坐标点
  79.         points : [{
  80.             x : 0,
  81.             y : 0,
  82.             data : {}//data为绑定到图标的数据，可以在onIconMouseOver和onIconMouseOut事件中获取
  83.         }],
  84.  
  85.         //定义图标位置，图标位置是以坐标点为基准的定位
  86.         position : {
  87.             left : -7,
  88.             top : -26,
  89.         },
  90.  
  91.         onIconMouseOver : $.noop,
  92.         onIconMouseOut : $.noop,
  93.         onMapDblClick : $.noop, //双击地图时触发的事件，两个参数，第一个为事件对象，第二个为所点击的点相对于地图的位置
  94.         onIconClick : $.noop//点击图标事件，两个参数，第一个为点，第二个为该点绑定的数据
  95.     }
  96. })(jQuery, Raphael);

再给个调用的例子：

  1.                 var points=[
  2.                         {x:193,y:176,fill:'red',data:{name:'济南市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
  3.                         {x:108,y:193,fill:'green',data:{name:'聊城市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
  4.                         {x:309,y:354,fill:'green',data:{name:'临沂市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
  5.                         {x:371,y:172,fill:'yellow',data:{name:'潍坊市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
  6.                         {x:484,y:241,fill:'red',data:{name:'青岛市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
  7.                         {x:569,y:83,fill:'green',data:{name:'烟台市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
  8.                         {x:629,y:84,fill:'red',data:{name:'威海市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
  9.                         {x:218,y:380,fill:'green',data:{name:'枣庄市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
  10.                         {x:158,y:310,fill:'yellow',data:{name:'济宁市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
  11.                         {x:58,y:326,fill:'green',data:{name:'菏泽市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
  12.                         {x:208,y:227,fill:'red',data:{name:'泰安市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
  13.                         {x:252,y:224,fill:'yellow',data:{name:'莱芜市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
  14.                         {x:413,y:316,fill:'green',data:{name:'日照市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
  15.                         {x:286,y:161,fill:'yellow',data:{name:'淄博市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
  16.                         {x:138,y:86,fill:'green',data:{name:'德州市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
  17.                         {x:286,y:94,fill:'yellow',data:{name:'滨州市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}},
  18.                         {x:326,y:82,fill:'green',data:{name:'东营市',projectName:'吴家堡街道办事处，吴家片区土地整理项目',period:'3期',date:'2013-01-15',money:'550万',content:'道路绿化，宣传标示牌，混凝土路及其它工程',complateDate:'2013-12-15'}}
  19.                         ]
  20.  
  21.                 $('#container').pointpainter({
  22.                     points : points,
  23.                     onIconClick : function(data) {
  24.                         window.location.href = "sjxmfbgl.html";
  25.                     },
  26.                     onMapDblClick : function(evt, point) {
  27.                         console.log('x:' + point.x + ',y:' + point.y + ',');
  28.                         $(this).pointpainter('setPoint', point);
  29.                     },
  30.                     onIconMouseOver : function(evt, data) {
  31.                         var offset = {
  32.                             top : evt.clientY,
  33.                             left : evt.clientX
  34.                         };
  35.                         var content = '项目名称：' + data.projectName + '<br>项目期数：' + data.period + '<br>立项日期：' + data.date + '<br>财政结算：' + data.money + '<br>项目内容：' + data.content + '<br>预计完工日期：' + data.complateDate;
  36.                         $('#pointTip').empty().html(content).show().offset(offset);
  37.                     },
  38.                     onIconMouseOut :function(){$('#pointTip').hide();}
  39.                 });

各式各样的图标可以从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

对Raphael画图标的一个jquery简单封装的更多相关文章

  1. jquery简单封装

    对Raphael画图标的一个jquery简单封装 公司要做一个项目的demo,要求地图上可以插红旗,所以就用到了Raphael. 因为是个demo,所以地图就用了一张图片,效果如下: 所以为了更好的封 ...

  2. 模拟jQuery简单封装ajax

    /*模拟jQuery的写法 (简单写法)*/ var $={}; /*ajax*/ $.ajax = function (options) { /* * 请求 * 1.请求接口 type get po ...

  3. 分享一个dapper简单封装

    using System;using System.Data.Common;using System.Linq;using Dapper;using MySql.Data.MySqlClient; p ...

  4. SignalR简单封装

    需求:Asp.Net MVC 开发客户端,实现与服务器端实时通信. 众所周知,Web开发是基于http的请求响应模型,每次刷新都需要客户端(浏览器)主动发起请求,那么,这个问题怎么解?Asp.Net ...

  5. Jquery Ajax简单封装(集中错误、请求loading处理)

    Jquery Ajax简单封装(集中错误.请求loading处理) 对Jquery Ajax做了简单封装,错误处理,请求loading等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...

  6. 一个很简单的jQuery插件实例教程(菜鸟级)

    很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好.而前端开发过程中,JavaScript技能又是必不可少的.所以,如果前端小MM正在为某个JavaScript效 ...

  7. jQuery框架开发一个最简单的幻灯效果

    在线演示 在这个课程中,我们将介绍如何使用jQuery来开发一个最简单的图片幻灯效果. 立刻观看互动课程:jQuery框架开发一个最简单的幻灯效果 阅读原文:jQuery框架开发一个最简单的幻灯效果

  8. 用XHR简单封装一个axios

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 使用jQuery简单实现返回顶部的一个小案例

    1.简单写一个页面 首先我们应该创建两个盒子,container盒子主要模拟页面滚动到的位置,back盒子主要功能是实现返回顶部的功能 2.简单的对这两个盒子写一些样式 我们应该先将返回顶部盒子隐藏( ...

随机推荐

  1. DateUtils 学习记录1

    开发过程中很多时候都需要处理各种各样的日期..有些项目可能还会有自己的DateUtil.... 其实apache commons lang3有一个很好用的日期处理工具类,叫DateUtils... 基 ...

  2. 关于在Xcode控制台打印的注意点

    注意!!在控制台中打印语句的返回值,这句代码也算是被执行过了一次 比如在下列代码的if语句执行之前,现在控制台打印 [_dataBaseexecuteUpdate:createSql] 的布尔值 if ...

  3. 第二章 --- 关于Javascript 设计模式 之 策略模式

    这一章节里面,我们会主要的针对JavaScript中的策略模式进行理解和学习 一.定义 策略模式: 定义一系列的算法,把他们封装起来,并且是他们可以相互替换. (这样的大的定义纲领,真的不好理解,特别 ...

  4. 我的vimrc

    set nocompatible set langmenu=en_USlet $LANG= 'en_US' source $VIMRUNTIME/vimrc_example.vim source $V ...

  5. C语言位域

    转载自 http://tonybai.com/2013/05/21/talk-about-bitfield-in-c-again/ 再谈C语言位域 五 21 bigwhite技术志 bitfield, ...

  6. PHP之readdir()函数

    最近在学习php文件操作的相关知识,记录一下readdir()函数其中的一个要注意的点 1. 在$temp=readdir($handle)函数中 readdir获取的是文件名和$handle中的文件 ...

  7. mac 下设置jdk 路径，设置hadoop 路径

    1. touch ~/.bash_profile  创建一个文件 2.vim ~/.bash_profile JAVA_HOME=/Library/Java/JavaVirtualMachines/j ...

  8. gitlab使用个人版v16.11

    title: gitlab使用个人版v16.11 date: 2016-11-13 20:53:00 tags: [gitlab] --- 1.安装gitbash 附上地址链接:git 2.配置git ...

  9. BZOJ4591——[Shoi2015]超能粒子炮·改

    1.题意:求 2.分析:公式恐惧症的同学不要跑啊QAQ 根据lucas定理-- 这一步大家都能懂吧,这是浅而易见的lucas定理转化过程,将每一项拆分成两项 那么下一步,我们将同类项合并 我们观察可以 ...

  10. Java基本数据类型总结

    基本类型,或者叫做内置类型,是JAVA中不同于类的特殊类型.它们是我们编程中使用最频繁的类型.java是一种强类型语言,第一次申明变量必须说明数据类型,第一次变量赋值称为变量的初始化. 1. Java ...