百度地图使用

<template>
  <div class="amap-wrapper" id="amap"></div>
</template>

<script>
import BaiduMap from "@/utils/BaiduMap";
import { getTrajectoryBySchemeid } from "@/api/iot/inspectionPlan";
import carIcon from "@/assets/image/car.png";
let map;
let driving;
let car;
let BMap;
export default {
  props: {
    row: {
      type: Object,
    },
  },
  data() {
    return {
      // 点位集合
      data: [],
      pathdata: [],
      points: [],
      label: "", //信息标签
      centerPoint: [],
      totalTime: 0, //根据点的数组长度和速度，计算路程的长度
      pastTime: 0, //点已经走的时间
      rangeLen: 0,
      judge: true,

      timer: null, //定时器
      index: 0, //记录播放到第几个point
    };
  },
  methods: {
    // 添加标注
    addMaker(points) {
      points.forEach((item) => {
        let marker = new BMap.Marker(item);
        // marker.setTitle(item.name);
        // marker.type = item.type;
        // marker.companyId = item.companyId;
        // marker.dangerLevel = item.dangerLevel;
        // // 添加点击事件
        // marker.addEventListener("click", (e) => {
        //   this.markerClick(e);
        // });
        map.addOverlay(marker);
      });
      map.setViewport(points);
    },
    initMap() {
      BaiduMap.init(BaiduMap)
        .then((_BMap) => {
          BMap = _BMap;
        })
        .then((_) => {
          return getTrajectoryBySchemeid({
            schemeid: this.row.schemeid,
            id: this.row.id,
          });
        })
        .then((response) => {
          this.data = response.data;
          this.pathdata = response.data.map((item) => {
            return new BMap.Point(item.lng, item.lat);
          });
        })
        .then((_) => BaiduMap.initTrackAnimation())
        .then((_) => {
          map = new BMap.Map("amap");
          if (this.pathdata.length > 0) {
            map.centerAndZoom(this.pathdata[0], 17);
          } else {
            map.centerAndZoom("南京", 16); // 初始化地图,设置中心点坐标和地图级别
          }
          map.enableScrollWheelZoom();
        })
        .then((_) => this.addMaker(this.pathdata))
        .then((_) => {
          this.makeDriver();
        });
    },
    makeDriver() {
      //通过DrivingRoute获取一条路线的point
      driving = new BMap.DrivingRoute(map); //可以使用WalkingRoute或RidingRoute，api生成的路径时不一样的

      driving.search(
        this.pathdata[this.rangeLen],
        this.pathdata[this.rangeLen + 1]
      ); //起点和终点
      driving.setSearchCompleteCallback(() => {
        //得到路线上的所有point
        this.points = driving.getResults().getPlan(0).getRoute(0).getPath(); //根据起点和终点，拿到路径上所有的点
        this.totalTime = this.points.length * 5; // 总时间
        // map.panTo(this.pathdata[this.rangeLen]); //视角移到起点
        //显示小车子

        car = new BMap.Marker(this.points[0], {
          icon: new BMap.Icon(carIcon, new BMap.Size(32, 32), {
            anchor: new BMap.Size(24, 24),
          }),
          enableRotation: true,
        });
        map.addOverlay(car);
        this.rangeLen++;
        this.play(5);
      });
    },

    play(speed) {
      this.pastTime += speed;

      var point = this.points[this.index];
      if (this.index > 0) {
        map.addOverlay(
          new BMap.Polyline([this.points[this.index - 1], point], {
            strokeColor: "#46a6ff",
            strokeWeight: 5,
            strokeOpacity: 0.8,
          })
        );
      }
      //   this.label.setContent("经度: " + point.lng + "<br>纬度: " + point.lat);
      car.setPosition(point);
      this.index++;

      if (
        this.totalTime - this.pastTime <= 1500 &&
        this.judge &&
        this.rangeLen < this.pathdata.length
      ) {
        this.judge = false;
        this.addPoints();
      }

      if (this.followPoint(point)) {
        map.centerAndZoom(point, 17);
      }

      if (this.index < this.points.length) {
        this.timer = window.setTimeout(() => {
          this.play(speed);
        }, speed);
      } else {
        // map.panTo(point);
      }
    },
    addPoints() {
      if (this.rangeLen + 1 == this.pathdata.length) {
        console.log(this.pathdata);
        setTimeout(() => map.setViewport(this.pathdata), 1000);
        return;
      }
      driving.search(
        this.pathdata[this.rangeLen],
        this.pathdata[this.rangeLen + 1]
      ); //起点和终点
      driving.setSearchCompleteCallback((_) => {
        var pwe = driving.getResults().getPlan(0).getRoute(0).getPath(); //根据起点和终点，拿到路径上所有的点
        this.points = this.points.concat(pwe);
        this.totalTime = this.points.length * 5;
        this.rangeLen++;
        this.judge = true;
      });
    },
    // 当点移动出范围以后，跟随点
    followPoint(p) {
      var bound = map.getBounds(); //地图可视区域
      if (bound.containsPoint(p) != true) {
        return true;
      } else {
        return false;
      }
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>

<style>
.amap-wrapper {
  width: 100%;
  height: 500px;
}
</style>