微信小程序地图实现展示线路的方法

<view class="page-section page-section-gap">
 <!-- longitude="{{longitude}}" latitude="{{latitude}}" scale="16" height: {{view.Height}}px;show-location-->
  <map class="navi_map" include-points='{{points}}' longitude="{{longitude}}" latitude="{{latitude}}" polyline="{{polyline}}" markers="{{markers}}" bindcallouttap="bindcallouttap" bindmarkertap="markertap"  wx:if="{{hasMarkers}}" scale="10" ></map>
 </view>
 <view class="maptext" wx:if="{{mapList!=''}}">
  <view class="news">
    <view wx:if="{{mapList.polylineJson!=null}}">预计<text >{{now}}</text>送达</view>
    <view class="tishi">由药店提供配送服务</view>
  </view>
  <view class="phone_box">
    <view  class="right_box" data-phone="{{mapPhone}}" bindtap="makeCallPhone" wx:if="{{mapPhone!=null}}">
    <image src="{{imgUrl}}mapshop_phone.png"></image><view >联系商家</view>
   </view>
   <view class="left_box" data-deliverhone="{{deliverPhone}}" bindtap="makesCallPhone" wx:if="{{deliverPhone!=null}}">
    <image src="{{imgUrl}}map_phone.png"></image><view >联系配送员</view>
   </view>
  </view>
</view>

data: {
  longitude: '',
  latitude:'',
  points: [],
  polyline: [],
  markers: [],
  mapList:'',
  polylineList:[],
  
 },
 mapLine(options){
   wx.showLoading({
    title: '加载中',
   })
   let subOrderNo = options.maporder
   console.log(subOrderNo)
   let that=this
   let token = that.data.storageData.token
   let url = '接口地址';
   let params = {
    subOrderNo:subOrderNo
   };
  
   http.getRequest(url, params, token).then(res => {
     
     
      // 地图打点标记商家和配送员位置
      let markers= [
       {
       iconPath: imgUrl+'shoplong.png',
       id: 0,
       latitude: that.data.mapList.pharmacyInfo.latitude,
       longitude: that.data.mapList.pharmacyInfo.longitude,
       callout: { 
        content: that.data.mapList.pharmacyInfo.pharmacyName+"已接单",
        name:"商家已接单",
        color: "#ff0000",
        fontSize: "16", 
        borderRadius: "6",
        bgColor: "#ffffff",
        padding: "10",
        display:"ALWAYS"
        },
       width: 50,
       height: 50
      },
      {
       iconPath:imgUrl+ 'maplog.png',
       id: 1,
       latitude: that.data.mapList.locationList[0].latitude,
       longitude: that.data.mapList.locationList[0].longitude,
       callout: { 
        content: "配送员正在配送",
        name:"正在配送",
        color: "#ff0000",
        fontSize: "16", 
        borderRadius: "6",
        bgColor: "#ffffff",
        padding: "10",
        display:"ALWAYS"
        },
       width: 50,
       height: 50
      },
     ];
     console.log(markers)
     let _this=this
     _this.setData({
      markers:markers,
      hasMarkers:true,
      latitude:that.data.mapList.pharmacyInfo.latitude,
      longitude:that.data.mapList.pharmacyInfo.longitude
     })
     if(orderDeliver.polylineJson!=null){
      let mapJson = JSON.parse(orderDeliver.polylineJson);
      console.log(mapJson)
      // 计算送达时间
      let mapDate=that.data.mapList.updateTime
      let newsDate=new Date(mapDate)
      // let h = newsDate.getHours()
      let m = newsDate.getMinutes()
      let mapMinte=mapJson.route.paths[0].duration/60
      newsDate.setMinutes(m+mapMinte)
      let dd=newsDate.getMinutes()
      let hh=newsDate.getHours()
      if(dd<10){
       dd='0'+dd
      }
      if(hh<10){
       hh='0'+hh
      }
      let now=hh +':'+dd;
      if(newsDate.getMinutes()>=60){
        h=h+1;
      }else{
       this.setData({
        now:now
       })
       console.log(now)
      }
      // 循环数组取快递员的经纬度
      let list = mapJson.route.paths[0].steps;
      // console.log(list);
      let polylineList = [];  
      for(let i =0;i<list.length;i++){
       let polyline = list[i].polyline;
       if(polyline.indexOf(";") != -1){
        let pList = polyline.split(";");
        // console.log(pList)
        pList.map((items,index) =>{
         let a = items.split(",");
         polylineList.push({
          latitude: a[1],
          longitude: a[0]
         });
         // console.log(polylineList)
        })
        // polylineList.concat(pList);
       }
      }
       let polyline = [{
        points: polylineList,
        color: "#518FF8",
        width: 4,
        dottedLine: false
       }];
       this.setData({
        polyline:polyline,
        points:polylineList,
       }) 
      }  
     }else if(res.responseCode == 0 && res.responseBody != null && res.responseBody.length != 0 && res.responseBody.deliverType ==2){
      let list_di=res.responseBody.deliverType
      let maplistJson=res.responseBody.polylineJson
      let listMap=JSON.parse(maplistJson)
      console.log(listMap)
      let logList=listMap.data.reverse()
      logList.forEach(element => {
        element.ftime = element.ftime.substring(0,16)
      });
      console.log(logList)
      this.setData({
       mapList:[],
       hasMarkers:false,
       logList:logList,
       list_di:list_di
      })
      // sysMsg.sysMsg("商家还未接单，请稍后查看", 2000, 'none');
     }else{
      sysMsg.sysMsg("商家还未接单，请稍后查看", 2000, 'none');
     }
   }).catch(err => {
    console.log(err);
    sysMsg.sysMsg("请求超时，请稍后再试", 1500, 'none');
   })
 },
 onLoad: function (options) {
  this.mapLine(options)
  this.mapHeight()
  this.mapLog()
  // this.markers()
  // console.log(options.maporder)
  this.getstorageDataToPage()
     // qq地图api
   qqmapsdk = new QQMapWX({
   key: '申请的微信小程序地图key'
  });
},