微信小程序之map地图规划路线以及显示距离

有个问题：在选择公交路线（包含步行和公交）时，怎么才能让不同的路线显示不同的颜色？
ps:有个方式，自己写坐标解压往后的存入新数组。把步行时的数据标注下，有什么简单的方法呢？

自定义函数文件

/**
 * 自动获取定位信息
 */
function getLocation(that, qqmapsdk) {
  if (wx.getSystemInfoSync().locationEnabled == false) {
    wx.showModal({
      title: '提示',
      content: '请打开手机定位',
      showCancel: false
    })
    return;
  }
  if (wx.getSetting) {
    wx.getSetting({
      success: (res) => {
        if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
          wx.showModal({
            title: '请求授权当前位置',
            content: '需要获取您的地理位置，请确认授权',
            success: function (res) {
              if (res.confirm) {
                wx.openSetting({})
              } else if (res.cancel) {
                wx.showModal({
                  title: '提示',
                  content: '授权失败',
                  showCancel: false
                })
                wx.removeStorage('tempAddrInfo_dingwei');
                return;
              }
            }
          })
        } else {
          wx.getLocation({ //授权获取当前位置信息
            type: 'gcj02',
            success(res) {
              qqmapsdk_dizhi(that, qqmapsdk, res.latitude, res.longitude);
            },
            fail(res) { //请求频率第一次返回当前未知信息，剩余返回第一次位置信息
              wx.showModal({
                title: '提示',
                content: '无法获取您的位置信息,请到设置—>微信—>位置中检查是否打开定位服务并允许访问您的定位。并重新进入小程序',
              })
            }
          })
        }
      }
    })
  } else {
    // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
    wx.showModal({
      title: '提示',
      content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
    })
    return;
  }
}
/**
 * 地址解析
 */
function qqmapsdk_dizhi(that, qqmapsdk, latitude, longitude) {
  qqmapsdk.reverseGeocoder({
    location: latitude + ',' + longitude,
    success: function (v) {
      var tempAddrInfo_dingwei = wx.getStorageSync('tempAddrInfo_dingwei') || {};
      var d_quyu = v.result.address_component.province + v.result.address_component.city + v.result.address_component.district
      tempAddrInfo_dingwei.province = v.result.address_component.province; //省份
      tempAddrInfo_dingwei.city = v.result.address_component.city; //城市
      tempAddrInfo_dingwei.district = v.result.address_component.district; //区
      tempAddrInfo_dingwei.address = v.result.address; //详细地址
      tempAddrInfo_dingwei.address_dquyu = d_quyu; //省市区
      tempAddrInfo_dingwei.latitude = v.result.location.lat; //坐标
      tempAddrInfo_dingwei.longitude = v.result.location.lng; //坐标
      wx.setStorageSync('tempAddrInfo_dingwei', tempAddrInfo_dingwei);
      console.log(tempAddrInfo_dingwei)
      //刷新数据
      // that.goRefreshDatas();
    },
    fail: function (v) {},
  })
}

module.exports = {
  getLocation: getLocation,
}

index.wxml

<view class="page-body">
  <view class="page-section page-section-gap">
    <map id="myMap" style="width: 100%; height: {{height}}px;" scale="{{scale}}" bindmarkertap="markerTap"
      polyline="{{polyline}}" show-location="true" latitude="{{tempAddrInfo_dingwei.latitude}}"
      longitude="{{tempAddrInfo_dingwei.longitude}}"></map>
    <view class="Dang" bindtap="Dingwei">
      <image src="../images/dingweidang.png"></image>
    </view>
    <view class="Daohang">
      <view class="title">距离：{{mode_juli}}米</view>
      <view class="caozuo">
        <button class="left" bindtap="getCenterLocationqi" type="primary">
          <image src="../images/mudidi.png"></image><text>选择起点</text>
        </button>
        <button class="left" bindtap="getCenterLocationzong" type="primary">
          <image src="../images/mudidi.png"></image><text>选择终点</text>
        </button>
        <!-- <button class="right" bindtap="Xdiandaohang">
          <image src="../images/daozhequ.png"></image><text>到这去</text>
        </button> -->
      </view>
    </view>
  </view>
</view>
<view class="danghang">
  <view bindtap="luXian" data-id="1" class="li {{luixian==1?'hover':''}}">驾车</view>
  <view bindtap="luXian" data-id="2" class="li {{luixian==2?'hover':''}}">步行</view>
  <view bindtap="luXian" data-id="3" class="li {{luixian==3?'hover':''}}">骑行</view>
  <view bindtap="luXian" data-id="4" class="li {{luixian==4?'hover':''}}">公交</view>
</view>

index.css

button {
  margin: 0;
  padding: 0;
  border-radius: 0;
  border: none;
  font-size: 1em;
  background-color: transparent;
}

button::after {
  border: none;
}

.page-section-gap {
  box-sizing: border-box;
  position: relative;
}

.page-section-gap .Dang {
  position: absolute;
  bottom: 280rpx;
  right: 40rpx;
  background-color: #fff;
  border-radius: 50%;
  width: 60rpx;
  height: 60rpx;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-section-gap .Dang image {
  width: 40rpx;
  height: 40rpx;
}

.page-body-button {
  margin-bottom: 30rpx;
}

.daohang {
  border-radius: 10rpx;
  background-color: #000;
  color: #fff;
  font-size: 24rpx;
  text-align: center;
  font-weight: bold;
}

.Zhoubian {
  margin-top: 20px;
}

.page-body .Daohang {
  position: absolute;
  background-color: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  bottom: 0rpx;
  left: 0rpx;
  z-index: 999;
  width: 100%;
  padding: 20rpx 0;
}

.page-body .Daohang .title {
  font-size: 30rpx;
  font-weight: 500;
  color: #000;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #ccc;
  margin: 0 20rpx;
}

.page-body .Daohang .caozuo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 0;
  margin: 0 20rpx;
}

.page-body .Daohang .caozuo .zhou {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 200rpx;
  background-color: #fff;
  border: 1px solid #FFFFFF;
}

.page-body .Daohang .caozuo .zhou image {
  width: 30rpx;
  height: 30rpx;
}

.page-body .Daohang .caozuo .zhou text {
  font-size: 24rpx;
  color: #000;
  font-weight: 500;
  margin-top: 10rpx;
}

.page-body .Daohang .caozuo .left {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  /* border: 1px solid #1296db; */
  padding: 10rpx;
  border-radius: 32rpx;
  margin-right: 20rpx;
}

.page-body .Daohang .caozuo .left image {
  width: 40rpx;
  height: 40rpx;
}

.page-body .Daohang .caozuo .left text {
  font-size: 30rpx;
  color: #fff;
  font-weight: 500;
  margin-left: 20rpx;
}

.page-body .Daohang .caozuo .right {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  background-color: #1296db;
  padding: 10rpx;
  border-radius: 32rpx;
  margin-left: 20rpx;
}

.page-body .Daohang .caozuo .right image {
  width: 40rpx;
  height: 40rpx;
}

.page-body .Daohang .caozuo .right text {
  font-size: 30rpx;
  color: #fff;
  font-weight: 500;
  margin-left: 20rpx;
}

.danghang {
  position: fixed;
  top: 0rpx;
  left: 0rpx;
  width: 100%;
  height: 100rpx;
  z-index: 99999999999999;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.danghang .li {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.danghang .li.hover {
  color: #1296db;
}

index.js

var app = getApp();
var util = require("../../utils/util.js");
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js'); //引用库
var qqmapsdk = new QQMapWX({
  key: app.globalData.tengxunMapKey //微信小程序，腾讯位置服务key
});
Page({
  data: {
    latitude: '39.9090401338795', //默认中心点
    longitude: '116.39744076190188', //默认中心点
    markers: [{
      id: '',
      latitude: '',
      longitude: '',
      name: '',
      callout: {}
    }],
    scale: 16, //默认缩放
    luixian: 0,
    polyline: [{
      points: '', //路线的存放做标数组
      color: '', //路线颜色
      width: '', //线的宽度
    }],
    zhonxin: [{ //把所有路劲都显示在当前地图中
      latitude: '',
      longitude: '',
    }],
    mode: 'driving', //默认驾车
    mode_juli: 0, //默认驾车
  },
  onShow: function () {
    var that = this;
    var tempAddrInfo_dingwei = wx.getStorageSync('tempAddrInfo_dingwei');
    if (!tempAddrInfo_dingwei) {
      util.getLocation(that, qqmapsdk);//获取用户当前定位
    }
    //默认起始位置为当前所在位置
    var luxian_qi = tempAddrInfo_dingwei.latitude + ',' + tempAddrInfo_dingwei.longitude;
    var from_latitude = tempAddrInfo_dingwei.latitude;
    var from_longitude = tempAddrInfo_dingwei.longitude;
    that.setData({
      height: wx.getSystemInfoSync().windowHeight, //默认地图大小满屏
      tempAddrInfo_dingwei,
      luxian_qi,
      from_longitude,
      from_latitude,
    })
    //返回中心点
    var mapCtx = wx.createMapContext('myMap'); //wxml中map标签的id值
    mapCtx.moveToLocation();
  },
  //返回中心点
  Dingwei: function (e) {
    var that = this;
    //返回中心点
    var mapCtx = wx.createMapContext('myMap'); //wxml中map标签的id值
    mapCtx.moveToLocation();
  },
  //选择起点
  getCenterLocationqi: function () {
    var that = this;
    wx.chooseLocation({ //这个是拉起搜索
      success(res) {
        that.setData({
          luxian_qi: res.latitude + ',' + res.longitude,
          from_latitude: res.latitude,
          from_longitude: res.longitude,
        })
        console.log(res.latitude + ',' + res.longitude)
      },
    })
  },
  //选择终点
  getCenterLocationzong: function () {
    var that = this;
    wx.chooseLocation({ //这个是拉起搜索
      success(res) {
        that.setData({
          luxian_end: res.latitude + ',' + res.longitude,
          to_latitude: res.latitude,
          to_longitude: res.longitude,
        })
      },
    })
  },
  // // // // // // // // // // // // //路线规划 (腾讯地图接口)// // // // // // // // // // // 
  luXian: function (e) {
    var that = this;
    if (!that.data.luxian_qi || !that.data.luxian_end) { //起点
      wx.showModal({
        title: '提示',
        content: '路线规划失败1，请确认终点和起点',
        showCancel: false
      })
      return;
    }
    //计算两坐标之间的中心点
    // var zhonxin = that.data.zhonxin;
    // zhonxin[0].latitude = (Number(that.data.from_latitude) + Number(that.data.to_latitude)) / 2;
    // zhonxin[0].longitude = (Number(that.data.from_longitude) + Number(that.data.to_longitude)) / 2;
    var mapCtx = wx.createMapContext("myMap");
    mapCtx.includePoints({
      padding: [70, ],
      points: [{
        latitude: that.data.from_latitude,
        longitude: that.data.from_longitude
      }, {
        latitude: that.data.to_latitude,
        longitude: that.data.to_longitude
      }]
    })
    var luixian = e.currentTarget.dataset.id;
    var mode = that.data.mode;
    if (luixian == 1) { //驾车
      mode = 'driving';
    } else if (luixian == 2) { //步行
      mode = 'walking';
    } else if (luixian == 3) { //骑行  
      mode = 'bicycling';
    } else if (luixian == 4) {
      mode = 'transit';
    }
    //规划路线
    qqmapsdk.direction({
      mode: mode, //可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填
      //from参数不填默认当前地址
      from: that.data.from_latitude + ',' + that.data.from_longitude, //用户当前做标
      to: that.data.to_latitude + ',' + that.data.to_longitude, //终点做标
      success: function (res) {
        var ret = res;
        if (luixian != 4) {
          var coors = ret.result.routes[0].polyline,
            pl = [];
          //坐标解压（返回的点串坐标，通过前向差分进行压缩）
          var kr = 1000000;
          for (var i = 2; i < coors.length; i++) {
            coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
          }
          //将解压后的坐标放入点串数组pl中
          for (var i = 0; i < coors.length; i += 2) {
            pl.push({
              latitude: coors[i],
              longitude: coors[i + 1]
            })
          }
        } else {
          var ret = res.result.routes[0];
          var count = ret.steps.length;
          var pl = [];
          var coors = [];
          //获取各个步骤的polyline
          for (var i = 0; i < count; i++) {
            if (ret.steps[i].mode == 'WALKING' && ret.steps[i].polyline) {
              coors.push(ret.steps[i].polyline);
            }
            if (ret.steps[i].mode == 'TRANSIT' && ret.steps[i].lines[0].polyline) {
              coors.push(ret.steps[i].lines[0].polyline);
            }
          }
          //坐标解压（返回的点串坐标，通过前向差分进行压缩）
          var kr = 1000000;
          for (var i = 0; i < coors.length; i++) {
            for (var j = 2; j < coors[i].length; j++) {
              coors[i][j] = Number(coors[i][j - 2]) + Number(coors[i][j]) / kr;
            }
          }
          //定义新数组，将coors中的数组合并为一个数组
          var coorsArr = [];
          for (var i = 0; i < coors.length; i++) {
            coorsArr = coorsArr.concat(coors[i]);
          }
          //将解压后的坐标放入点串数组pl中
          for (var i = 0; i < coorsArr.length; i += 2) {
            pl.push({
              latitude: coorsArr[i],
              longitude: coorsArr[i + 1]
            })
          }
        }
        //设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
        that.setData({
          latitude: pl[0].latitude,
          longitude: pl[0].longitude,
          polyline: [{
            points: pl,
            color: '#FF0000DD',
            width: 4
          }]
        })
      },
      fail: function (error) {
        console.log(error)
        wx.showModal({
          title: '提示',
          content: error.message,
          showCancel: false
        })
        return;
      },
    });
    //计算距离
    qqmapsdk.calculateDistance({
      mode: mode, //可选值：'driving'（驾车）、'walking'（步行），不填默认：'walking',可不填
      //from参数不填默认当前地址
      //获取表单提交的经纬度并设置from和to参数（示例为string格式）
      from: that.data.luxian_qi, //若起点有数据则采用起点坐标，若为空默认当前地址
      to: that.data.luxian_end, //终点坐标
      success: function (res) { //成功后的回调
        var res = res.result;
        var dis = [];
        for (var i = 0; i < res.elements.length; i++) {
          dis.push(res.elements[i].distance); //将返回数据存入dis数组，
        }
        that.setData({ //设置并更新mode_juli数据
          mode_juli: dis
        });
      },
      fail: function (error) {
        wx.showModal({
          title: '提示',
          content: '计算距离仅支持驾车，步行',
          showCancel: false
        })
        return;
      },
    });
    that.setData({
      luixian,
    })
  },
})