百度地图的轨迹回放和实时监控

最近写了两个页面，是跟百度地图有关的，本来以为是用的鹰眼的轨迹，才发现没那么麻烦，直接用的是百度地图自带的api。

1 轨迹回放

<template>
 <div class="map">
     <!--面包屑-->
    <span class="content_span">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>后台管理</el-breadcrumb-item>
            <el-breadcrumb-item>人员管理</el-breadcrumb-item>
            <el-breadcrumb-item>{
  {this.$route.meta.title}}</el-breadcrumb-item>
        </el-breadcrumb>
    </span>

     <div class="left">
          <!-- 设备信息 -->
          <div class="she_bei">
              <h5>设备信息</h5>
              <el-form ref="form" :model="form1" label-width="80px">
                    <el-form-item label="所属班组:">
                        <el-select v-model="form2.class1" placeholder="请选择" @change="change1">
                            <el-option
                            v-for="item in class1"
                            :key="item.value"
                            :label="item.value"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="设备编号:">
                        <el-select v-model="form2.number" placeholder="请选择" @change="change2">
                            <el-option
                            v-for="item in number"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
              </el-form>
          </div>

          <!-- 时间 -->
          <div class="time">
             <h5>时间</h5>
             <el-form ref="form" :model="form2" label-width="80px">
                    <el-form-item label="开始时间:">
                         <el-date-picker
                            v-model="form2.value1"
                            type="datetime"
                            placeholder="开始时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间:">
                         <el-date-picker
                            v-model="form2.value2"
                            type="datetime"
                            placeholder="结束时间">
                        </el-date-picker>
                    </el-form-item>
              </el-form>
              <el-button size="mini" style="float:right;margin-right:35px;" @click="inquiry">轨迹查询</el-button>
          </div>

          <!-- 回放控制 -->
          <div class="hui_fang">
             <h5>回放控制</h5>
             <el-button size="mini" @click="play">开始</el-button>
             <el-button size="mini" @click="pause">暂停</el-button>
             <el-button size="mini" @click="reset">重放</el-button>
             <el-button size="mini" @click="clear">清除轨迹</el-button>
             <strong style="font-size:12px;margin-top:8px;display:block;">播放速率：</strong>
             <el-slider
                v-model="value3"
                :marks="marks"
                style="width:90%;margin-left:5%;"
                :step="1">
            </el-slider>
          </div>

          <!-- 状态 -->
          <div class="status">
              <h5>状态</h5>
              <div><span>总里程数:</span>约{
  {totalMi}}公里</div>
              <!-- <div><span>终端名称:</span>{
  {form2.number}}</div> -->
              <div><span>定位类型:</span>GPS+北斗</div>
              <div><span>当前速度:</span>{
  {speed}}km/h</div>
              <div><span>当前时间:</span>{
  {date}}</div>
              <div><span>轨迹时间:</span>约{
  {hour}}时{
  {minute}}分{
  {second}}秒</div>
              <!-- <div><span>现里程数:</span>约{
  {nowMi}}公里</div>
              <div><span>运动时间:</span></div>
              <div><span>停留时间:</span></div> -->
          </div>
     </div>
     <!-- 地图 -->
    <div id="map">
      
    </div>
    
 </div>
 
    
</template>

<script>
var _this;
import axios from '../../apiconfig/index.js';
import loadMap from '../../../static/js/loadBMap.js';
import GeoUtils from '../../../static/js/util.js';
const moment=require('moment');
export default {
    data(){
        return {
            // 设备信息
            equipment:[],
            form1:{
                class1:'',
                number:''
            },
            //所属班组
            class1:[],