微信小程序地图绘制线段并且测量(实例代码)
上图:
上代码:wxml
这里有很多按钮不要,cover-image不仅可以看到,并且能够点击,直接写image虽然也能看见貌似无法点击。记下这个坑
主要的事就点击map的单击事件, bindtap="clickMapTap",和数据的展示polyline="{{polyline}}"和markers="{{marks}}"
js:
measureTap是给地图添加状态用的,在page的data声明:mapstate(地图的状态);然后在measureTap修改mapstate的值即可
主要是点击事件,思路,点击地图获取经纬度,判断点的数量,来完成操作上代码
clickMapTap:function(e){//单击地图事件 varmark=newObject();//声明一个mark对象 mark.id=this.data.marks.length; mark.longitude=e.detail.longitude;//经度 mark.latitude=e.detail.latitude; mark.iconPath="/images/point.png"; mark.width=10; mark.height=12; //在data中声明一个curPoints来记录点击所有额点,在完成绘制的时候清空点。 varlength=this.data.curPoints.push({ longitude:e.detail.longitude, latitude:e.detail.latitude }) varlength=this.data.curPoints.length; if(length>1){//添加线上的超过一个的点,每次吧距离叠加上去 varp2=this.data.curPoints[length-1] varp1=this.data.curPoints[length-2] dis+=util.distance(p1,p2); letdatas=Number(dis);//转为字符串 letdatas2=datas.toFixed(2)+"米";//保留两位小数 varx=-(datas2.length*1)//设置文字向左偏移 mark.label={ fontSize:14, anchorX:x, anchorY:0, content:datas2, textAlign:'center', color:'#000000', } this.data.marks.push(mark); //console.log(this.data.curPoints) //这里地图上用的polyline是一个线集合对象,所以,如果只放一条线是无法看见的。 varpl=[{ points:this.data.curPoints, color:"#0066FF", width:2, dottedLine:false, }]; //更改界面数据 this.setData({ marks:this.data.marks, polyline:pl }) }else{//添加线上的第一个点 this.data.marks.push(mark); this.setData({ marks:this.data.marks }) } } },
工具类Util:
//给定的经度1,纬度1;经度2,纬度2.计算2个经纬度之间的距离。 //距离(单位:米) //util的方法是通过读取类文件,然后通过映射获取的,所以需要在使用的page中加入 //varutil=require('../../../utils/util.js');相当于一个导入的过程。 functiondistance(p1,p2){ //用haversine公式计算球面两点间的距离。 //经纬度转换成弧度 varlat1=p1.latitude*Math.PI/180; varlon1=p1.longitude*Math.PI/180; varlat2=p2.latitude*Math.PI/180; varlon2=p2.longitude*Math.PI/180; //差值 varvLon=Math.abs(lon1-lon2); varvLat=Math.abs(lat1-lat2); //histhegreatcircledistanceinradians,greatcircle就是一个球体上的切面,它的圆心即是球心的一个周长最大的圆。 varv=Math.sin(vLat/2); varv1=Math.sin(vLon/2); varh=v*v+Math.cos(lat1)*Math.cos(lat2)*v1*v1; //地球半径平均值,米 vardistance=2*6371000*Math.asin(Math.sqrt(h)); returndistance; } module.exports={//用于映射函数 distance:distance, }
注意点:
1.导入util的类文件
2.类文件中的方法模板的映射关系
3.ployline对象是一个数组,不是对象,所以注意层级关系。
总结
以上所述是小编给大家介绍的微信小程序地图绘制线段并且测量,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。