這篇文章將為大家詳細(xì)講解有關(guān)微信小程序地圖如何繪制線段并且測(cè)量，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司長(zhǎng)期為千余家客戶(hù)提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為鐵鋒企業(yè)提供專(zhuān)業(yè)的成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作，鐵鋒網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

上圖：

上代碼：wxml

這里有很多按鈕不要，cover-image不僅可以看到，并且能夠點(diǎn)擊，直接寫(xiě)image雖然也能看見(jiàn)貌似無(wú)法點(diǎn)擊。記下這個(gè)坑

主要的事就點(diǎn)擊map的單擊事件， bindtap="clickMapTap"，和數(shù)據(jù)的展示 polyline="{{polyline}}" 和markers="{{marks}}"

js：

measureTap是給地圖添加狀態(tài)用的，在page的data聲明：mapstate（地圖的狀態(tài)）;然后在measureTap修改mapstate的值即可

主要是點(diǎn)擊事件，思路，點(diǎn)擊地圖獲取經(jīng)緯度，判斷點(diǎn)的數(shù)量，來(lái)完成操作上代碼

clickMapTap: function(e) { //單擊地圖事件
   var mark = new Object();//聲明一個(gè)mark對(duì)象
   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中聲明一個(gè)curPoints 來(lái)記錄點(diǎn)擊所有額點(diǎn)，在完成繪制的時(shí)候清空點(diǎn)。
   var length = this.data.curPoints.push({
    longitude: e.detail.longitude,
    latitude: e.detail.latitude
   })
    var length = this.data.curPoints.length;
    if (length > 1) { //添加線上的超過(guò)一個(gè)的點(diǎn)，每次吧距離疊加上去
 
     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是一個(gè)線集合對(duì)象，所以，如果只放一條線是無(wú)法看見(jiàn)的。
     var pl = [{
      points: this.data.curPoints,
      color: "#0066FF",
      width: 2,
      dottedLine: false,
     }];
    //更改界面數(shù)據(jù)
     this.setData({
      marks: this.data.marks,
      polyline:pl
     })
     
    } else { //添加線上的第一個(gè)點(diǎn)
     this.data.marks.push(mark);
     this.setData({
      marks: this.data.marks
 
     })
   }
  }
 },

工具類(lèi)Util：

//給定的經(jīng)度1，緯度1；經(jīng)度2，緯度2. 計(jì)算2個(gè)經(jīng)緯度之間的距離。
//距離 （單位：米）
//util的方法是通過(guò)讀取類(lèi)文件，然后通過(guò)映射獲取的，所以需要在使用的page中加入
//var util = require('../../../utils/util.js');相當(dāng)于一個(gè)導(dǎo)入的過(guò)程。
function distance(p1, p2) {
 //用haversine公式計(jì)算球面兩點(diǎn)間的距離。
 //經(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就是一個(gè)球體上的切面，它的圓心即是球心的一個(gè)周長(zhǎng)最大的圓。
 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,
}

注意點(diǎn)：

1.導(dǎo)入util的類(lèi)文件

2.類(lèi)文件中的方法模板的映射關(guān)系

3.ployline對(duì)象是一個(gè)數(shù)組，不是對(duì)象，所以注意層級(jí)關(guān)系。

關(guān)于“微信小程序地圖如何繪制線段并且測(cè)量”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。