微信小程序地圖實現(xiàn)展示線路

更新時間：2020年07月29日 14:52:19 作者：緣飛夢

這篇文章主要為大家詳細介紹了微信小程序地圖實現(xiàn)展示線路，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序地圖實現(xiàn)展示線路的具體代碼，供大家參考，具體內(nèi)容如下

效果圖：

思路：

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

2、在獲取的坐標點上標注某一個位置，實現(xiàn)打點。（參考微信小程序地圖組件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}}">預(yù)計<text style="color:#FF6565">{{now}}</text>送達</view>
  <view class="tishi">由藥店提供配送服務(wù)</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">聯(lián)系商家</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">聯(lián)系配送員</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)
   }
   // 循環(huán)數(shù)組取快遞員的經(jīng)緯度
   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'
 });
},

為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: