위 챗 애플 릿 맵 에서 선분 을 그리고 측정(인 스 턴 스 코드)

위의 그림:

위 코드:wxml

<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>

여기 에는 원 하지 않 는 버튼 이 많 습 니 다.cover-image 는 볼 수 있 을 뿐만 아니 라 클릭 할 수 있 습 니 다.image 를 직접 써 도 볼 수 있 지만 클릭 할 수 없 을 것 같 습 니 다.이 구 덩이 를 기록 해라.
주요 한 일 은 맵 의 클릭 이벤트, bindtap="clickMapTap"과 데이터 의 전시 polyline="{polyline}"과 markers="{marks}"
js：
measuretap 는 맵 에 상 태 를 추가 하 는 데 사 용 됩 니 다.page 의 data 성명:mapstate(맵 의 상태);그리고 measuretap 에서 mapstate 값 을 수정 하면 됩 니 다.
주로 이벤트,사 고 를 클릭 하고 지 도 를 클릭 하여 경위도,판단 점 의 수량 을 얻어 조작 상의 코드 를 완성 합 니 다.

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         。
//<returns>   （  ： ）</returns>
//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,
}

주의 점:
1.util 클래스 파일 가 져 오기
2.클래스 파일 의 방법 템 플 릿 의 맵 관계
3.ployline 대상 은 하나의 배열 로 대상 이 아니 므 로 등급 관계 에 주의 하 세 요.
총결산
위 에서 말 한 것 은 소 편 이 소개 한 위 챗 애플 릿 지도 로 라인 을 그리고 측정 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
만약 당신 이 본문 이 당신 에 게 도움 이 된다 고 생각한다 면,전 재 를 환영 합 니 다.번 거 로 우 시 겠 지만 출처 를 밝 혀 주 십시오.감사합니다!