<template>
  <div id="map" style="width: 100%; height: 400px;"></div>
  <!-- 地图容器，设置了宽度和高度 -->
</template>

<script>
export default {
  name: 'GaodeMap', // 组件名称
  data() {
    return {
      map: null, // 地图实例
      carMarker: null, // 车辆标记实例
      carPath: null, // 车辆行驶路径（注意：此处代码并未初始化路径）
      carPosition: { // 车辆当前位置
        longitude: 116.397428, // 经度
        latitude: 39.90923, // 纬度
      },
      path: []
    };
  },
  mounted() {
    this.initMap(); // 初始化地图
    this.createCar(); // 创建车辆标记
    this.startSimulation(); // 开始模拟车辆移动
  },
  methods: {
    initMap() {
      // 初始化地图，设置初始中心点和缩放级别
      this.map = new AMap.Map('map', {
        zoom: 15, // 缩放级别
        center: [this.carPosition.longitude, this.carPosition.latitude], // 中心点经纬度
      });
      this.polyline = new AMap.Polyline({
        map: this.map,
        path: [],
        strokeColor: "#FF0000",
        strokeWeight: 5,
      });
    },
    createCar() {
      // 创建车辆标记，设置车辆图标、位置等
      const icon = new AMap.Icon({
        size: new AMap.Size(50, 50), // 图标尺寸
        image: 'https://s1.4sai.com/src/img/png/37/3760fd545ff848c2b241b7cf400b3dd7.png?imageView2/2/w/256&e=1735488000&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:F5xvrYJwsejuj9uCJhs70CQ7-mg=', // 图标图片链接
        imageSize: new AMap.Size(50, 50), // 图标所用图片尺寸
      });

      this.carMarker = new AMap.Marker({
        map: this.map, // 标记添加到哪个地图上
        position: [this.carPosition.longitude, this.carPosition.latitude], // 标记位置
        icon: icon, // 使用的图标
        offset: new AMap.Pixel(-26, -13), // 相对于定位点的偏移量
      });

      // 初始化轨迹线，但先不添加到地图上
      this.polyline = new AMap.Polyline({
        path: this.path,
        isOutline: true,
        outlineColor: '#000000',
        borderWeight: 1,
        lineJoin: 'round',
        lineCap: 'round',
        strokeColor: '#0091ff',
        strokeWeight: 6,
        // 可以在这里设置更多的 Polyline 样式
      });
    },
    startSimulation() {
      // 开始模拟车辆移动，每秒调用一次 moveCar 方法
      setInterval(() => {
        this.moveCar();
      }, 1000);
    },
    moveCar() {
      // 模拟车辆移动，随机改变经纬度
      const newLng = this.carPosition.longitude + 0.001; // 经度增加0.001
      const newLat = this.carPosition.latitude + 0.001 * Math.random() * 0.5; // 纬度随机增加0.0005到0.001
      // 注意：此处 carPath 并未初始化或用于显示路径，可能会报错
      // 如果你需要记录或显示行驶路径，请初始化 carPath 并使用 AMap.Polyline 等相关 API
      // this.carPath.push([newLng, newLat]); // 假设 carPath 是一个 Polyline 实例
      this.carMarker.setPosition([newLng, newLat]); // 设置车辆标记的新位置
      this.carPosition = { longitude: newLng, latitude: newLat }; // 更新车辆位置
      // 更新轨迹点
      this.path.push(this.carPosition);
      // 更新车辆标记的位置
      this.carMarker.setPosition(this.carPosition);

      // 如果还没有将轨迹线添加到地图上，现在添加
      if (!this.polyline.getMap()) {
        this.polyline.setMap(this.map);
      }
      // 更新轨迹线
      this.polyline.setPath(this.path);

    },
  },
  beforeDestroy() {
    // 组件销毁前清理资源
    if (this.carPath) {
      this.carPath.setMap(null); // 如果 carPath 是 Polyline 实例，则移除它
    }
    if (this.carMarker) {
      this.carMarker.setMap(null); // 移除车辆标记
    }
    if (this.map) {
      this.map.destroy(); // 销毁地图实例
    }
    if (this.polyline) {
      this.polyline.setMap(null); // 移除轨迹线
    }
  },
};
</script>
