微信小程序地图绘制线段并且测量(实例代码)
微信(小程序)  /  管理员 发布于 3年前   247
上图: 上代码:wxml 这里有很多按钮不要,cover-image不仅可以看到,并且能够点击,直接写image虽然也能看见貌似无法点击。记下这个坑 主要的事就点击map的单击事件, bindtap="clickMapTap",和数据的展示 polyline="{{polyline}}" 和markers="{{marks}}" js: measureTap是给地图添加状态用的,在page的data声明:mapstate(地图的状态);然后在measureTap修改mapstate的值即可 主要是点击事件,思路,点击地图获取经纬度,判断点的数量,来完成操作上代码 工具类Util: 注意点: 1.导入util的类文件 2.类文件中的方法模板的映射关系 3.ployline对象是一个数组,不是对象,所以注意层级关系。 总结 以上所述是小编给大家介绍的微信小程序地图绘制线段并且测量,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对站的支持!clickMapTap: function(e) { //单击地图事件 var mark = new Object();//声明一个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 来记录点击所有额点,在完成绘制的时候清空点。 var length = this.data.curPoints.push({ longitude: e.detail.longitude, latitude: e.detail.latitude }) var length = this.data.curPoints.length; if (length > 1) { //添加线上的超过一个的点,每次吧距离叠加上去 var p2 = this.data.curPoints[length-1] var p1 = this.data.curPoints[length-2] dis += util.distance(p1, p2); let datas = Number(dis); //转为字符串 let datas2 = datas.toFixed(2) + "米";//保留两位小数 var x = -(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是一个线集合对象,所以,如果只放一条线是无法看见的。 var pl = [{ 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 }) } } },
//给定的经度1,纬度1;经度2,纬度2. 计算2个经纬度之间的距离。//
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!您可能感兴趣的文章:
博主 在
2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..xiaoB 在
2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..BUG4 在
你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..博主 在
go语言+beego框架中获取get,post请求的所有参数中评论 @ t1 直接在router.go文件中配就ok..Jade 在
如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号