vue + 百度地图实现轨迹回放（很详细）

效果

 

 

 功能

时间搜索查询轨迹并生成（默认是当前的一天的时间）

图标能跟随路径方向移动

删除了百度logo和版权信息（业务需要，不建议删除）

Vue Baidu Map

npm install vue-baidu-map --save

main.js

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})

完整的业务代码

<!-- 轨迹回放的弹窗 -->
<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="hideDialog"
    :close-on-click-modal="false"
  >
    <div class="dialogHeader">
      <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="日期">
          <el-date-picker
            v-model="formData.dateStr"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder=""
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="时间">
          <el-time-picker
            is-range
            v-model="formData.timeArr"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="HH:mm:ss"
            placeholder=""
          >
          </el-time-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getPath">查询</el-button>
          <el-button type="warning" @click="playPoints">
            {{ play ? "暂停" : "播放" }}
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 百度地图 -->
    <baidu-map
      @ready="bMapReady"
      class="map"
      :center="centerPoint"
      :zoom="zoom"
      :ak="bdAk"
      :dragging="true"
      :auto-resize="true"
      :scroll-wheel-zoom="true"
    >
      <!-- 运行轨迹的路线 -->
      <bm-polyline
        stroke-color="blue"
        :path="path"
        :stroke-opacity="0.5"
        :stroke-weight="3"
        :editing="false"
      ></bm-polyline>

      <!-- marker 可以展示的图标 起点、终点 -->
      <bm-marker
        :icon="startMarkIcon"
        :position="{ lng: startMark.lng, lat: startMark.lat }"
      ></bm-marker>
      <bm-marker
        :icon="endMarkIcon"
        :position="{ lng: endMark.lng, lat: endMark.lat }"
      ></bm-marker>
      <bml-lushu
        @stop="reset"
        :path="path"
        :icon="icon"
        :play="play"
        :rotation="true"
        :speed="100"
      >
      </bml-lushu>
    </baidu-map>
  </el-dialog>
</template>

<script>
import { BmlLushu } from "vue-baidu-map";
import { queryLocus } from "@/api/forklift/carInfo";

export default {
  name: "trackPlaybackDialog",
  components: {
    BmlLushu,
  },
  data() {
    return {
      title: "",
      dialogVisible: false,
      formData: {
        dateStr: "",
        timeArr: ["00:00:00", "23:59:59"],
      },
      bdAk: "YOUR_APP_KEY", // 改成你自己的ak
      play: false, // 是否自动播放轨迹动画
      path: [],
      polylinePath: [],
      centerPoint: { lng: 116.404, lat: 39.915 }, // 地图中心点
      zoom: 11, // 缩放层级
      icon: {
        // url: "http://api.map.baidu.com/library/LuShu/1.2/examples/car.png",
        url: require("../../../../public/img/btnIcon/forklist1.png"),
        size: { width: 52, height: 26 },
        opts: { anchor: { width: 27, height: 13 } },
      },
      startMark: {}, // 起点
      startMarkIcon: {
        // url: "http://api.map.baidu.com/library/LuShu/1.2/examples/car.png",
        url: require("../../../../public/img/btnIcon/startPoint.png"),
        size: { width: 52, height: 38 },
        opts: { anchor: { width: 19, height: 38 } },
      }, // 起点图标配置
      endMark: {}, // 终点
      endMarkIcon: {
        // url: "http://api.map.baidu.com/library/LuShu/1.2/examples/car.png",
        url: require("../../../../public/img/btnIcon/endPoint.png"),
        size: { width: 52, height: 38 },
        opts: { anchor: { width: 19, height: 38 } },
      }, // 终点图标配置
      BMap: null,
    };
  },

  computed: {
    /**
     * @计算属性 设置默认当前日期的年月日
     * */
    timeDefault() {
      const date = new Date();
      let res =
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      return res;
    },
  },

  methods: {
    showDialog(data) {
      this.title = data.title;
      this.carId = data.data.id;
      this.dialogVisible = true;
      this.formData.dateStr = this.timeDefault;
      this.getPath();
    },
    hideDialog() {
      this.dialogVisible = false;
      this.false = false;
      this.startMark = {};
      this.endMark = {};
    },

    /**
     * 停止播放运行轨迹
     * */
    reset() {
      this.play = false;
    },

    /**
     * @Interface 查询运行轨迹
     * */
    getPath() {
      let queryObj = {
        carId: this.carId,
        beginTime: this.formData.dateStr + " " + this.formData.timeArr[0],
        endTime: this.formData.dateStr + " " + this.formData.timeArr[1],
      };
      queryLocus(queryObj).then((res) => {
        this.play = false;
        if (res.data !== [] && res.data.length > 0) {
          // 关键部分
          this.path = [];
          let length = res.data.length;
          let middle = -1;
          if (length % 2 === 0) {
            middle = length / 2 + 1;
          } else {
            middle = (length + 1) / 2;
          }
          res.data.forEach((item, index) => {
            // this.path.push({
            //   lng: JSON.parse(item.longitude),
            //   lat: JSON.parse(item.latitude),
            // }); // ??? 会导致rotation失效且控制台一直报错
            this.path.push(new this.BMap.Point(item.longitude, item.latitude));
          });
          this.centerPoint = this.path[middle]; // 地图中心点
          this.startMark = this.path[0]; // 起点
          this.endMark = this.path[this.path.length - 1]; // 终点
          this.zoom = 19; // 地图缩放层级
        } else {
          this.$message.warning("当前时间段没有运行轨迹");
          this.path = [];
          this.zoom = 11;
        }
      });
    },

    /**
     * 播放/暂停 运行轨迹
     * */
    playPoints() {
      this.play = !this.play;
    },

    /**
     * @Event 方法
     * @description: 获取百度地图实例
     * */
    bMapReady({ BMap, map }) {
      this.BMap = BMap;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  min-width: 1200px !important;
}

.dialogHeader {
}

.mapBox {
  width: 1180px;
  height: 70vh;
  z-index: 999 !important;
}

.map {
  width: 100%;
  height: 70vh;
}

::v-deep .anchorBL {
  display: none !important; // 删除百度地图logo和版权信息
}
</style>

图标