js简单地测距实现

之前做了一个小项目用到了类似测距的功能
效果图:

[img]http://dl.iteye.com/upload/attachment/0074/0274/f6051600-d794-3cd5-9e8e-a336f39f666c.jpg[/img]

这里分享出来希望可以帮助大家首先引入svg.js jQuery.js
MAP:
–index.html
|
–stone.gif
|
–js
–jquery.js
|
–svg.js

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>

js:


<script type="text/javascript">
$(document).ready(function(){
$('#maps').click(function(e){
var left=e.pageX;
var top=e.pageY;
var o={
left:left,
top:top
}
//Ploy.addPoint(top,left);
//Ploy.makeSvgContainer();
var lengths=Ploy.makePoly('#maps',o);
lengths=(Math.round(lengths*100))/100;
$('#info').html(lengths+'Km');
})
});
//return array's max
Array.prototype.max = function(){
return Math.max.apply({}, this);
}
//return array's min
Array.prototype.min = function(){
return Math.min.apply({}, this);
}
var options={
cssClickClass:'point',//点击时生成点的类
svgCtnCls:'svgContainer',//svg容器的类
wapper:'#maps',
scale:'1'
};
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
})
}
},
//添加点在地图区域中
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();
//遍历已经有的点,做出路线
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"});
//计算距离
return pathslength.getTotalLength()*options.scale;
}
}
</script>

HTML:index.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/svg.js"></script>
</head>
<body>
<div id="maps">
<div id="info">
</div>

</div>

</body>
</html>


图片:stone.gif

[img]http://dl.iteye.com/upload/attachment/0074/0276/1ab9043a-7e4a-330c-ab4a-1e9d93304d06.gif[/img]
转载自:https://blog.csdn.net/iteye_8463/article/details/82404703

You may also like...