微信小程序地圖實現展示路線路

效果圖：

思路：

1、首先獲取一系列的座標點，然後將這些座標從頭到尾鏈接起來。（參考微信小程序地圖組件polyline屬性）

2、在獲取的座標點上標註某一個位置，實現打點。（參考微信小程序地圖組件marker屬性 ） 

3、使用map組件

微信小程序地圖組件api地址：https://developers.weixin.qq.com/miniprogram/dev/component/map.html

下面直接展示代碼：

wxml:

<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" style="width: 100%; height: {{view.Height}}px;" wx:if="{{hasMarkers}}" scale="10" ></map>
  </view>
  <view class="maptext" wx:if="{{mapList!=''}}">
    <view  class="news">
        <view wx:if="{{mapList.polylineJson!=null}}">預計<text style="color:#FF6565">{{now}}</text>送達</view>
        <view class="tishi">由藥店提供配送服務</view>
    </view>
    <view  class="phone_box">
       <view style="" class="right_box" data-phone="{{mapPhone}}" bindtap="makeCallPhone" wx:if="{{mapPhone!=null}}">
        <image src="{{imgUrl}}mapshop_phone.png"></image><view style="line-height:96rpx">聯繫商家</view>
      </view>
      <view  class="left_box" data-deliverhone="{{deliverPhone}}" bindtap="makesCallPhone" wx:if="{{deliverPhone!=null}}">
        <image src="{{imgUrl}}map_phone.png"></image><view style="line-height:96rpx">聯繫配送員</view>
      </view>
    </view>
  </view>

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