不久前看到了QQ地圖的測(cè)距功能，覺得挺好玩的，就思考模仿一下。本來想通過canvas來畫圖，可惜對(duì)canvas不是很熟悉，就準(zhǔn)備用svg了，其實(shí)我對(duì)svg也不是很熟，純粹是學(xué)習(xí)。

代碼只是簡單的生成圖線，沒有刪除點(diǎn)的功能，也沒有拖動(dòng)路線的功能,demo僅僅是拋磚引玉，大俠就不要拍磚了，我是個(gè)菜鳥。

DEMO截圖：

素材：

資源：jQuery.js,Raphael.js

思考：

實(shí)現(xiàn)測(cè)距所需要獲取的參數(shù)，最基本的兩點(diǎn)：

1：比例尺，由于是虛擬的地圖，比例尺可以手動(dòng)設(shè)定。

2：路線的長度，可以通過path.getTotalLength()來獲取像素長度。

基本知識(shí)：

1:svg的路徑格式

?

<path d="M 100 100 L 300 200 L 200 300 z" />

說明：

M 表示移動(dòng)到當(dāng)前點(diǎn) M 100 100 指將當(dāng)前點(diǎn)移動(dòng)到坐標(biāo)(100, 100) 的地方
L 表示繪制直線 "L 300 200" 指從當(dāng)前位置(100, 100) 繪制直線到 (300, 200) 處
z 表示閉合路徑，首尾相連。更多

2:我們使用Raphael這個(gè)js操作SVG。其聲明path的基本語法,更多

/*String id,divWidth,divHeight*/ var ploy = Raphael('mapPloy', datas.w, datas.h); var pathslength=ploy.path(options) 實(shí)現(xiàn)：

獲取鼠標(biāo)發(fā)生事件的位置--->添加點(diǎn)--->更新包含svg的DIV的相關(guān)屬性--->繪圖

原理：

代碼：

HTML與CSS

<style type="text/css">#maps{width:500px;height:300px;background:#f9f9f9;border:1px solid #c6c6c6;margin:10px auto;position:relative;}div.point{position:absolute;width:12px;height:12px;background:url(stone.gif) no-repeat;}div.svgCotainer{position:absolute;}#mapPloy{position:absolute;}#info{position:absolute;top:10px;right:10px;width:100px;height:25px;background:#ecf6fc;border:1px solid #8ad0fd;font-size:14px;font-family:Arial, Helvetica, sans-serif;color:#51a961;text-align:center;line-height:25px;}</style> <div id="maps"><div id="info"></div></div>

1首先寫個(gè)獲取數(shù)組中最大值，最小值的方法，主要是為了獲取所有點(diǎn)Top與Left的最大值與最小值

//return array's maxArray.prototype.max = function(){return Math.max.apply({}, this);}//return array's minArray.prototype.min = function(){return Math.min.apply({}, this); } 2其次為了便于控制，聲明一些屬性

var options={cssClickClass:'point',//點(diǎn)擊時(shí)生成點(diǎn)的類svgCtnCls:'svgContainer',//svg容器的類wapper:'#maps',//地圖容器scale:'1'//比例尺}; 3.代碼實(shí)現(xiàn)

var Ploy={getData:function(){var arrayTop=[];var arrayLeft=[];var el=$('div.'+options.cssClickClass);$.each(el,function(i,n){var pointTop=$(n).position().top;var pointLeft=$(n).position().left;arrayTop.push(pointTop);arrayLeft.push(pointLeft);});var minTop=arrayTop.min();var maxTop=arrayTop.max();var minLeft=arrayLeft.min();var maxLeft=arrayLeft.max();var svgWidth=maxLeft-minLeft+el.width();var svgHeight=maxTop-minTop+el.height();return {w:svgWidth,h:svgHeight,minTop:minTop,minLeft:minLeft,elWidth:el.width(),elHeight:el.height()}},makeSvgContainer:function(){var s=this;var datas=s.getData();var div=$('#mapPloy').is('div');if(!div){var svgContainer=$('<div/>').attr('id','mapPloy').addClass(options.svgCtnCls).css({width:datas.w,height:datas.h,top:datas.minTop+datas.elHeight/2,left:datas.minLeft+datas.elWidth/2}).prependTo($(options.wapper));}else{$('#mapPloy').css({width:datas.w,height:datas.h,top:datas.minTop+datas.elHeight/2,left:datas.minLeft+datas.elWidth/2})}},//添加點(diǎn)在地圖區(qū)域中addPoint:function(top,left){var wapper=$(options.wapper);var t=wapper.offset().top;var l=wapper.offset().left;var pt=top-t;var pl=left-l;var point=$('<div/>').addClass(options.cssClickClass).css({top:pt,left:pl,poisiton:'absolute'}).appendTo(wapper);},makePoly:function(el,o){var s=this;s.addPoint(o.top,o.left);s.makeSvgContainer();//清空svg，重新畫圖$(el).find('div.'+options.svgCtnCls).empty();//遍歷已經(jīng)有的點(diǎn)，做出路線var points=$('div.'+options.cssClickClass);var datas=s.getData();//生成路徑var path=""$.each(points,function(i,n){if(i==0){path+="M";}else{path+="L";}var leftInSvg=$(n).position().left-datas.minLeft;var TopInSvg=$(n).position().top-datas.minTop;path += leftInSvg;path += ",";path += TopInSvg;path += " ";});var ploy = Raphael('mapPloy', datas.w, datas.h);var pathslength=ploy.path(path).attr({stroke:'#1791fc', 'stroke-width':3,opacity:.7, fill:"none"});//計(jì)算距離return pathslength.getTotalLength()*options.scale;} } 啟動(dòng)事件

$(document).ready(function(){$('#maps').click(function(e){var left=e.pageX;var top=e.pageY;var o={left:left,top:top}var lengths=Ploy.makePoly('#maps',o);lengths=(Math.round(lengths*100))/100;$('#info').html(lengths+'Km');}) });

DEMO下載

轉(zhuǎn)載于:https://www.cnblogs.com/gxll1314/archive/2010/10/09/1846484.html

超強(qiáng)干貨來襲 云風(fēng)專訪：近40年碼齡，通宵達(dá)旦的技術(shù)人生

總結(jié)

以上是生活随笔為你收集整理的(jQuery,SVG)使用jQuery和svg仿QQ地图测距功能(抛砖引玉)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。