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

 
  
 
 
  
    预计{{now}}送达
    由药店提供配送服务
  
  
    
    联系商家
   
   
    联系配送员
   
  

data: {
  longitude: &＃39;&＃39;,
  latitude:&＃39;&＃39;,
  points: [],
  polyline: [],
  markers: [],
  mapList:&＃39;&＃39;,
  polylineList:[],
  
 },
 mapLine(options){
   wx.showLoading({
    title: &＃39;加载中&＃39;,
   })
   let subOrderNo = options.maporder
   console.log(subOrderNo)
   let that=this
   let token = that.data.storageData.token
   let url = &＃39;接口地址&＃39;;
   let params = {
    subOrderNo:subOrderNo
   };
  
   http.getRequest(url, params, token).then(res => {
     
     
      // 地图打点标记商家和配送员位置
      let markers= [
       {
       iconPath: imgUrl+&＃39;shoplong.png&＃39;,
       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+ &＃39;maplog.png&＃39;,
       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=&＃39;0&＃39;+dd
      }
      if(hh<10){
       hh=&＃39;0&＃39;+hh
      }
      let now=hh +&＃39;:&＃39;+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{
         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, &＃39;none&＃39;);
     }else{
      sysMsg.sysMsg("商家还未接单，请稍后查看", 2000, &＃39;none&＃39;);
     }
   }).catch(err => {
    console.log(err);
    sysMsg.sysMsg("请求超时，请稍后再试", 1500, &＃39;none&＃39;);
   })
 },
 onLoad: function (options) {
  this.mapLine(options)
  this.mapHeight()
  this.mapLog()
  // this.markers()
  // console.log(options.maporder)
  this.getstorageDataToPage()
     // qq地图api
   qqmapsdk = new QQMapWX({
   key: &＃39;申请的微信小程序地图key&＃39;
  });
},