The company wants to create a project demo and requires that the red flag be inserted on the map, so Raphael is used.
Because it is a demo, an image is used for the map. The effect is as follows:
So in order to better encapsulate this function, I wrote a Simple plug-in: jquery-pointpainter.js
= ( options == 'string' (options == 'setPoint' && opts = $.extend( .each().data('pointpainter.opts' opts = .data('pointpainter.opts'.dblclick( offset = $( point =-- paper = Raphael([0], opts.width || .width(), opts.height || .data('pointpainter.paper' opts = .data('pointpainter.opts' paper = .data('pointpainter.paper' ( i = 0; i < opts.points.length; i++ point ='t' + (point.x + opts.position.left) + ',' + (point.y + opts.position.top)).click(, , evt, , evt, opts = .data('pointpainter.opts'= 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'"none" cursor : 'pointer' width : 0000-7-26 onIconClick : $.noop
Here is an example of a call:
Points = 193, y: 176, fill: 'red', data: {name: 'jinan ', projectName: 'wujiapu sub-district office, wujia District Land Consolidation Project', period: 'Phase 3 ', date: '2017-01-15', money: '000000', content: 'road greening, publicity badge, concrete road and other projects', complateDate: '2017-12-15 '2013, y: 108, fill: 'green', data: {name: 'liaocheng', projectName: 'wujiapu Sub-District Office, wujia district land consolidation project ', period: 'Phase 3', date: '2017-01-15 ', money: '000000', content: 'road afforestation, publicity badge, concrete Road and other projects ', complateDate: '2017-12-15' 2013, y: 309, fill: 'green', data: {name: 'linyi City ', projectName: 'wujiapu sub-district office, wujia District Land Consolidation Project', period: '3', date: '2017-01-15 ', money: '2016', content: 'road afforestation, publicity badge, concrete road and other projects ', complateDate: '2017-12-15' 2013, y: 371, fill: 'yellow', data: {name: 'weifang City ', projectName: 'wujiapu sub-district office, wujia District Land Consolidation Project', period: '3', date: '2017-01-15 ', money: '2016', content: 'road afforestation, publicity badge, concrete road and other projects ', complateDate: '2017-12-15' 2013, y: 484, fill: 'red', data: {name: 'qingdao ', projectName: 'wujiapu sub-district office, wujia District Land Consolidation Project', period: '3', date: '2017-01-15 ', money: '2016', content: 'road afforestation, publicity badge, concrete road and other projects ', complateDate: '2017-12-15' 2013, y: 83, fill: 'green', data: {name: 'yantai City ', projectName: 'wujiapu sub-district office, wujia District Land Consolidation Project', period: '3', date: '2017-01-15 ', money: '2016', content: 'road afforestation, publicity badge, concrete road and other projects ', complateDate: '2017-12-15' 2013, y: 84, fill: 'red', data: {name: 'weihai ', projectName: 'wujiapu sub-district office, wujia District Land Consolidation Project', period: '3', date: '2017-01-15 ', money: '2016', content: 'road afforestation, publicity badge, concrete road and other projects ', complateDate: '2017-12-15' 2013, y: 218, fill: 'green', data: {name: 'zaozhuang ', projectName: 'wujiapu sub-district office, wujia District Land Consolidation Project', period: '3', date: '2017-01-15 ', money: '2016', content: 'road afforestation, publicity badge, concrete road and other projects ', complateDate: '2017-12-15' 2013, y: 158, fill: 'yellow', data: {name: 'jining City ', projectName: 'wujiapu sub-district office, wujia District Land Consolidation Project', period: '3', date: '2017-01-15 ', money: '2016', content: 'road afforestation, publicity badge, concrete road and other projects ', complateDate: '2017-12-15' 58, y: 2013, fill: 'green', data: {name: 'heze City ', projectName: 'wujiapu sub-district office, wujia District Land Consolidation Project', period: '3', date: '2017-01-15 ', money: '2016', content: 'road afforestation, publicity badge, concrete road and other projects ', complateDate: '2017-12-15' 2013, y: 208, fill: 'red', data: {name: 'tai'an ', projectName: 'wujiapu sub-district office, wujia District Land Consolidation Project', period: '3', date: '2017-01-15 ', money: '2016', content: 'road afforestation, publicity badge, concrete road and other projects ', complateDate: '2017-12-15' 2013, y: 252, fill: 'yellow', data: {name: 'laiwu City ', projectName: 'wujiapu sub-district office, wujia District Land Consolidation Project', period: '3', date: '2017-01-15 ', money: '2016', content: 'road afforestation, publicity badge, concrete road and other projects ', complateDate: '2017-12-15' 2013, y: 413, fill: 'green', data: {name: 'rizhao city', projectName: 'wujiapu sub-district office, wujia District Land Consolidation Project', period: '3', date: '2017-01-15 ', money: '2016', content: 'road afforestation, publicity badge, concrete road and other projects ', complateDate: '2017-12-15' 2013, y: 286, fill: 'yellow', data: {name: 'zibo City ', projectName: 'wujiapu sub-district office, wujia District Land Consolidation Project', period: '3', date: '2017-01-15 ', money: '2016', content: 'road afforestation, publicity badge, concrete road and other projects ', complateDate: '2017-12-15' 2013, y: 86, fill: 'green', data: {name: 'dezhou ', projectName: 'wujiapu sub-district office, wujia District Land Consolidation Project', period: '3', date: '2017-01-15 ', money: '2016', content: 'road afforestation, publicity badge, concrete road and other projects ', complateDate: '2017-12-15' 2013, y: 94, fill: 'yellow', data: {name: 'binzhou City ', projectName: 'wujiapu sub-district office, wujia District Land Consolidation Project', period: '3', date: '2017-01-15 ', money: '2016', content: 'road afforestation, publicity badge, concrete road and other projects ', complateDate: '2017-12-15' 2013, y: 82, fill: 'gre en', data: {name: 'dongying city ', projectName: 'wujiapu sub-district office, wujiaxiao land consolidation Project', period: '3', date: '2017-01-15 ', money: '2016', content: 'Road greening, publicity signs, concrete roads and other projects', complateDate: '2017-12-15 ''# iner '=" sjxmfbgl.html "'X:' + point. x + ', y:' + point. y + ','). pointpainter ('setpoint' offset = content = 'Project name: '+ data. projectName + '<br> project period:' + data. period + '<br> Project Date:' + data. date + '<br> Financial Settlement:' + data. money + '<br> project content:' + data. content + '<br> expected completion date:' + '# pointTip' () {$ ('# pointTip'
All kinds of icons can be found in M6.5, 29h2V3h-2V29z
Welcome to shoot bricks ^_^
2013-08-21
: Http://pan.baidu.com/share/link? Container id = 3942623987 & uk = 641094506 & third = 15