微信小程序地图绘制线段并且测量(实例代码)

2023-08-03 15:35:04 58

上图：

上代码：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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

微信小程序地图绘制线段并且测量(实例代码)

热门推荐

随机推荐