ShipOwner_WxApp/miniprogram/pages/demo/demo.js

// pages/demo/demo.js
const data = require("./data.js");
// 引入SDK核心类
let QQMapWX = require("../../utils/qqmap-wx-jssdk.min");

// 实例化API核心类
let qqmapsdk = new QQMapWX({
  key: "Y2BBZ-IHRKU-V42VO-BFQEE-K7252-ZBBSF", // 必填
});
Page({
  data: {
    latitude: 31.228725,
    longitude: 121.475186,
    start: {
      address: "上海市黄浦区人民大道185号",
      errMsg: "chooseLocation:ok",
      latitude: 31.228725,
      longitude: 121.475186,
      name: "上海人民广场",
    },
    end: {
      address: "上海市虹口区东江湾路444号",
      errMsg: "chooseLocation:ok",
      latitude: 31.271447,
      longitude: 121.480604,
      name: "虹口足球场",
    },
    points: [],
    markers: [],
    isRecording: false,
    timeInterval: 10,
  },
  //在Page({})中使用下列代码
  //触发表单提交事件，调用接口
  formSubmit() {
    let { start, end } = this.data;
    if (Object.keys(start).length === 0) {
      wx.showToast({
        title: "请选择起点",
        icon: "none",
        duration: 2000,
      });
      return;
    }
    if (Object.keys(end).length === 0) {
      wx.showToast({
        title: "请选择终点",
        icon: "none",
        duration: 2000,
      });
      return;
    }
    let from = `${start.latitude},${start.longitude}`;
    let to = `${end.latitude},${end.longitude}`;
    //调用距离计算接口
    qqmapsdk.direction({
      mode: "driving", //可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填
      //from参数不填默认当前地址
      from,
      to,
      success: (res) => {
        let coors = res.result.routes[0].polyline,
          pl = [];
        //坐标解压（返回的点串坐标，通过前向差分进行压缩）
        let kr = 1000000;
        for (let i = 2; i < coors.length; i++) {
          coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
        }
        //将解压后的坐标放入点串数组pl中
        for (let i = 0; i < coors.length; i += 2) {
          pl.push({ latitude: coors[i], longitude: coors[i + 1] });
        }
        //设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
        this.drawPolyline(pl);
      },
      fail: function (error) {
        console.error(error);
      },
    });
  },
  drawPolyline(pl) {
    wx.showLoading({
      title: "Loading...",
    });
    let t = setTimeout(() => {
      this.setData({
        points: [
          {
            latitude: pl[0].latitude,
            longitude: pl[0].longitude,
          },
          {
            latitude: pl.at(-1).latitude,
            longitude: pl.at(-1).longitude,
          },
        ],
        polyline: [
          {
            points: pl,
            color: "#FF0000DD",
            width: 4,
          },
        ],
        markers: [
          {
            latitude: pl[0].latitude,
            longitude: pl[0].longitude,
            iconPath: "../../images/start1.png",
            height: 30,
            width: 30,
            anchor: {
              x: 0.5,
              y: 1,
            },
          },
          {
            latitude: pl.at(-1).latitude,
            longitude: pl.at(-1).longitude,
            iconPath: "../../images/end1.png",
            height: 30,
            width: 30,
            anchor: {
              x: 0.5,
              y: 1,
            },
          },
        ],
      });
      wx.hideLoading();
      clearTimeout(t);
    }, 1000);
  },
  init() {
    let coors = data.result.routes[0].polyline,
      pl = [];
    //坐标解压（返回的点串坐标，通过前向差分进行压缩）
    let kr = 1000000;
    for (let i = 2; i < coors.length; i++) {
      coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
    }
    //将解压后的坐标放入点串数组pl中
    for (let i = 0; i < coors.length; i += 2) {
      pl.push({ latitude: coors[i], longitude: coors[i + 1] });
    }
    //设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
    this.drawPolyline(pl);
  },
  getStart() {
    wx.chooseLocation({
      success: (start) => {
        console.log(start);
        this.setData({
          start,
        });
      },
    });
  },
  getEnd() {
    wx.chooseLocation({
      success: (end) => {
        console.log(end);
        this.setData({
          end,
        });
      },
    });
  },
  getChangedLocation({ latitude, longitude }) {
    let currentTime = new Date().getTime();
    let oldLocation = wx.getStorageSync("oldLocation");
    let oldTime = wx.getStorageSync("oldTime");
    let newLocation = latitude + "" + longitude;
    if (
      oldLocation != newLocation &&
      currentTime - oldTime > this.data.timeInterval * 1000
    ) {
      wx.setStorageSync("oldLocation", newLocation);
      wx.setStorageSync("oldTime", currentTime);
      this.data.markers.push({
        latitude,
        longitude,
        iconPath: "../../images/circle-blue.png",
        height: 12,
        width: 12,
      });
      this.setData({
        markers: this.data.markers,
      });
    }
  },
  start() {
    if (this.data.isRecording) {
      wx.showModal({
        title: "结束记录?",
        content: "",
        complete: ({ confirm }) => {
          if (confirm) {
            wx.offLocationChange(this.getChangedLocation);
            wx.setKeepScreenOn({ keepScreenOn: false });
            this.setData({
              isRecording: false,
            });
          } else {
          }
        },
      });
    } else {
      wx.setKeepScreenOn({ keepScreenOn: true });
      wx.startLocationUpdate({
        complete: (res) => {
          wx.onLocationChange(this.getChangedLocation);
        },
      });
      wx.showToast({
        icon: "none",
        title: "开始记录...",
      });
      this.setData({
        isRecording: true,
      });
    }
  },
  onLoad() {
    // this.init();
  },
  onShow() {},
});