seahorsesShop_miniapp/pages/MaterialFlow/MaterialFlow.js

// pages/map/map.js

// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');

// 实例化API核心类
var qqmapsdk = new QQMapWX({
  key: 'D3MBZ-LQK6U-IONVC-GJDPK-C43GF-UYFOC' // 必填
});

Page({

  /**
   * 页面的初始数据
   */
  data: {
    longitude: 110.277685,
    latitude: 25.093668,
    markers: [],
    polyline: [],
  },

  //在Page({})中使用下列代码
  //触发表单提交事件，调用接口
  formSubmit(e) {
    console.log(e.detail.value)
    var _this = this;
    //调用距离计算接口
    qqmapsdk.direction({
      mode: 'walking', //可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填
      //from参数不填默认当前地址
      from: e.detail.value.start,
      to: e.detail.value.dest,
      success: function (res) {
        console.log('1111');
        console.log(res.result.routes[0]);
        var ret = res;
        var coors = ret.result.routes[0].polyline,
          pl = [{
            latitude: e.detail.value.start.split(",")[0],
            longitude: e.detail.value.start.split(",")[1]
          }];
        //坐标解压（返回的点串坐标，通过前向差分进行压缩）
        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]
          })
        }
        pl.push({
          latitude: e.detail.value.dest.split(",")[0],
          longitude: e.detail.value.dest.split(",")[1]
        })
        console.log(pl)
        //设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
        _this.setData({
          polyline: [{
            points: pl,
            color: '#449CF7',
            width: 4,
            borderWidth: 2,
            arrowLine: true
          }]
        })
        _this.includePoints()
      },
      fail: function (error) {
        console.error(error);
      },
      complete: function (res) {
        // console.log(res);
      }
    });

    this.setData({
      markers: [{
          id: 0,
          latitude: e.detail.value.start.split(",")[0],
          longitude: e.detail.value.start.split(",")[1],
          iconPath: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png",
          width: 25,
          height: 37,
          callout: {
            content: " " + "当前位置" + " ",
            fontSize: 16,
            display: 'ALWAYS',
            padding: 10,
            borderRadius: 6,
            color: '#04358D'
          }
        },
        {
          id: 1,
          latitude: e.detail.value.dest.split(",")[0],
          longitude: e.detail.value.dest.split(",")[1],
          iconPath: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png",
          width: 25,
          height: 37,
          callout: {
            content: " " + "目的地" + " ",
            fontSize: 16,
            display: 'ALWAYS',
            padding: 10,
            borderRadius: 6,
            color: '#04358D'
          },
        }
      ]
    })
  },

  includePoints() {
    var points = Array.from(this.data.polyline[0].points)
    this.mapCtx = wx.createMapContext('map')
    this.mapCtx.includePoints({
      padding: [100, 40, 20, 40],
      points: points,
    })
  }
})