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

本文实例为大家分享了微信小程序地图实现展示线路的具体代码，供大家参考，具体内容如下

效果图：

思路：

1、首先获取一系列的坐标点，然后将这些坐标从头到尾链接起来。（参考微信小程序地图组件polyline属性）

2、在获取的坐标点上标注某一个位置，实现打点。（参考微信小程序地图组件marker属性 ）

3、使用map组件

微信小程序地图组件api地址

下面直接展示代码：

wxml:

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

js:

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{
         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'
  });
},

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。