<map id="tb_map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" bindtap="clickMapTap" bindcontroltap="controltap" bindregiοnchange="regionchange" markers="{{marks}}" polygons="{{polygons}}" polyline="{{polyline}}" include-points="{{includePoints}}"
  bindmarkertap="markertap" show-compass="true" show-location="true" style="width: 100%; height:{{mapH}}rpx">
  <cover-image style="position: absolute;left:20px;top:100px;width:20px;height:20px" src="/images/qun.png" bindtap="getLocalImage">
  </cover-image>
  <cover-view class="draw" style="position: absolute;left:87%;top:20px">
 
   <cover-image class="map_buttons" style="width:30px;height:30px" bindtap="drawTap" src="/images/draw.png" />
   <cover-image class="map_buttons" style="width:30px;height:30px" bindtap="measureTap" src="/images/measure.png" />
   <cover-image class="map_buttons" style="width:30px;height:30px" bindtap="backTap" src="/images/back.png" />
   <cover-image class="map_buttons" style="width:30px;height:30px" bindtap="finishTap" src="/images/finish.png" />
  </cover-view>
 
 </map>

clickMapTap: function(e) { //單擊地圖事件
   var mark = new Object();//聲明一個mark對象
   mark.id = this.data.marks.length;
   mark.longitude = e.detail.longitude; //經(jīng)度
   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); //轉(zhuǎn)為字符串
     let datas2 = datas.toFixed(2) + "米";//保留兩位小數(shù)
     var x = -(datas2.length * 1)//設(shè)置文字向左偏移
     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,
     }];
    //更改界面數(shù)據(jù)
     this.setData({
      marks: this.data.marks,
      polyline:pl
     })
     
    } else { //添加線上的第一個點
     this.data.marks.push(mark);
     this.setData({
      marks: this.data.marks
 
     })
   }
  }
 },

//給定的經(jīng)度1，緯度1；經(jīng)度2，緯度2. 計算2個經(jīng)緯度之間的距離。
//<returns>距離 （單位：米）</returns>
//util的方法是通過讀取類文件，然后通過映射獲取的，所以需要在使用的page中加入
//var util = require('../../../utils/util.js');相當(dāng)于一個導(dǎo)入的過程。
function distance(p1, p2) {
 //用haversine公式計算球面兩點間的距離。
 //經(jīng)緯度轉(zhuǎn)換成弧度
 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 = {//用于映射函數(shù)
 distance: distance,
}