本文例項為大家分享了微信小程式地圖實現展示線路的具體程式碼，供大家參考，具體內容如下

效果圖：

思路：

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

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

3、使用map元件

微信小程式地圖元件api地址

下面直接展示程式碼：

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:"正在配送",];
     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("商家還未接單，請稍後檢視",'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'
  });
},

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。