ybkq-app/src/views/trajectory/trajectory.vue

<template>
  <div style="height: 100vh">
    <van-nav-bar
      title="工作轨迹"
      left-text="返回"
      left-arrow
      @click-left="goBack()"
    />
    <div
      id="map-container"
      style="width: 100%; height: calc(100vh - 46px)"
    ></div>
  </div>
</template>

<script>
import { getTrack } from "@/api";
import { Notify } from "vant";
export default {
  name: "trajectory",
  components: {},
  data() {
    return {
      recordId: "",
    };
  },
  created() {
    this.recordId = this.$route.query.recordId;
  },
  mounted() {
    let that = this
    getTrack({ recordId: this.recordId }).then((res) => {
      if (res.status == 10000) {
        const map = new AMap.Map("map-container");
        // 如果为圆形
        map.setCenter(
            new AMap.LngLat(res.data.coordPoint.log, res.data.coordPoint.lat)
        );
        map.setZoom(13);
        map.add(
          new AMap.Polyline({
            path: res.data.guijicoord.map((item) => {
              return new AMap.LngLat(item.log, item.lat);
            }),
            strokeWeight: 6,
            strokeColor: "#ee0a24",
            lineJoin: "round",
            lineCap: "round",
            showDir: true,
            })
          );
        if (res.data.fenceType == 0) {
          map.add(
            new AMap.Circle({
              center: new AMap.LngLat(
                res.data.coordPoint.log,
                res.data.coordPoint.lat
              ),
              radius: parseFloat(res.data.fenceRadii),
              fillColor: "#409eff66",
              strokeColor: "#409eff",
              strokeWeight: 1,
            })
          );
        } else {
          map.add(
            new AMap.Polygon({
              path: res.data.coordPointList.map((item) => {
                return [item.log, item.lat];
              }),
              fillColor: "#409eff66",
              borderWeight: 1,
              strokeColor: "#409eff",
            })
          );
        }
      } else {
        Notify({ type: "warning", message: res.message || "查看轨迹信息失败",duration:1000 });
        setTimeout(()=>that.$router.back(),1000)
      }
    });
  },
  methods: {
    goBack() {
      this.$router.back();
    },
  },
};
</script>

<style scoped lang="scss">
$white: #fff;
.van-nav-bar {
  background: #67a2ff;
}
/deep/ .van-icon {
  color: $white;
}
/deep/ .van-nav-bar__text {
  color: $white;
}
/deep/ .van-nav-bar__title {
  color: $white;
}
</style>