小程序画地图线段测面积揭秘：按钮不灵怎么办？JS玩法大揭秘

小伙伴们好！是不是也常碰到这些事儿：微信小程序画地图线段测面积时总被各种困扰？那就跟你们说说我的解决办法！

上面那些图片和代码你都了解了。那这里好多按钮都没用怎么办？别担心，cover-image不仅可以看得到，还能用手点！虽然用image也能看到，但是好像点不了。记住这点

咱们先说说重要的事吧——点击地图那个事儿。别忘给它加个tap（点击）事件，这样你才能在代码里看到返回的信息。记得加上bindtap=”clickMapTap”这句。另外，显示数据的部分也别忘了，比如在polyline=”{{polyline}}”这行和markers=”{{marks}}”这儿都得添好它们的值！

接着说下JS这事呗。这个MeasureTap呢就是用来给地图搞点玩法儿的。你先在页面上弄个叫mapstate的变量，然后在MeasureTap那块儿，直接给它赋个新值就成了。

来说说这个关键步骤！你只要在地图上按个地方，就能获得它的经纬度了。然后，再数数刚才鼠标点过的点有几个好了，不同数量代表不同的操作。之后就是编程序上代码~

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
 
     })
   }
  }
 },

记住，工具包Util得导进来用~然后多看看类里的方法模版匹配情况，这可是很关键的！

//给定的经度1，纬度1；经度2，纬度2. 计算2个经纬度之间的距离。
//距离 （单位：米）
//util的方法是通过读取类文件，然后通过映射获取的，所以需要在使用的page中加入
//var util = require('../../../utils/util.js');相当于一个导入的过程。
function distance(p1, p2) {
 //用haversine公式计算球面两点间的距离。
 //经纬度转换成弧度
 var lat1 = p1.latitude * Math.PI / 180;
 var lon1 = p1.longitude * Math.PI / 180;
 var lat2 = p2.latitude * Math.PI / 180;
 var lon2 = p2.longitude * Math.PI / 180;
 //差值
 var vLon = Math.abs(lon1 - lon2);
 var vLat = Math.abs(lat1 - lat2);
 //h is the great circle distance in radians, great circle就是一个球体上的切面，它的圆心即是球心的一个周长最大的圆。
 var v = Math.sin(vLat / 2);
 var v1 = Math.sin(vLon / 2);
 var h = v * v + Math.cos(lat1) * Math.cos(lat2) * v1 * v1;
 // 地球半径 平均值，米
 var distance = 2 * 6371000 * Math.asin(Math.sqrt(h));
 return distance;
}
module.exports = {//用于映射函数
 distance: distance,
}

好，咱们是时候来总结一下咯。小编今天教了大伙儿怎么在微信小程序上画线和量长度，希望能帮到你们。要是还有啥问题的话，就给小编留个言，我会尽快解答哒。谢谢你们一直以来对我们网站的支持

问题搞定没？期待我分享给你的东西能有帮助~觉得好的话就给点儿鼓励，分享一下！我们刚刚聊了聊如何用微信小程序画路线并量长度。希望你们学到了不少，然后能勇往直前，挖掘出更多好玩儿的功能！记得多多留言，多互动，当然还要支持我，给个赞再分享出去！