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

Z时代
2024-01-10
分类：综合

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

效果图：

思路：

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:"正在配送",
    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'
 });
},