<template>
  <div>
    <div id="map"></div>
  </div>
</template>
 
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import baseConfig from "../../../public/config/project.config.json";
// 设置安全密钥
window._AMapSecurityConfig = {
  securityJsCode: "56bf9671d4b3517d294caec4751889a1", // 后期需替换
};
// import circle from "./circle.vue";
import { getDevicePosition } from "@/api/cockpit/cockpit";
export default {
  data() {
    return {
      map: null,
      // 标记点的数据
      deviceList: [],
    };
  },
  components: {
    // circle,
  },
  methods: {
    // 初始化地图
    initMap() {
      AMapLoader.load({
        key: "40849e82b4e33f5255b17372520c954d",  // 后期需替换
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          // 初始化地图
          this.map = new AMap.Map("map", {
            viewMode: "2D", //  是否为3D地图模式
            zoom: 18, // 初始化地图级别
            center:
              this.deviceList.length > 0 && this.deviceList[0].lat && this.deviceList[0].lon
                ? [this.deviceList[0].lon, this.deviceList[0].lat]
                : [116.4,39.9],
            resizeEnable: true,
          });
          this.marker();
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 标记点
    marker() {
      // 循环所有的标记点
      for (let i = 0; i < this.deviceList.length; i++) {
        if (this.deviceList[i].lon && this.deviceList[i].lat) {
          var marker = new AMap.Marker({
            position: [this.deviceList[i].lon, this.deviceList[i].lat], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            map: this.map,
            content: `<div class="circle-container">
    <div class="circle-one"></div>
    <div class="circle-three"></div>
    <div class="circle-two"></div>
  </div>`,
            offset: new AMap.Pixel(-15, -20),
          });
          // 将创建的点标记添加到已有的地图实例：
          this.map.add([marker]);
        }
      }
    },
    // 获取坐标数据
    fetchPositionData() {
      getDevicePosition()
        .then((res) => {
          // console.log(res);
          this.deviceList = res.data;
          // 初始化地图
          this.initMap();
        })
        .catch(() => {
          this.initMap();
        });
    },
  },
  created() {
    this.fetchPositionData();
  },
};
</script>
 
<style scoped>
#map {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "微软雅黑";
}
</style>
<style>
/* 隐藏高德logo  */
.amap-logo {
  display: none !important;
}

/* 隐藏高德版权  */
.amap-copyright {
  display: none !important;
}
</style>
<style scoped>
circle-container {
  position: absolute;
}

.circle-one,
.circle-two,
.circle-three,
.circle-four {
  width: 0px;
  height: 0px;
  background-color: transparent;
  border: 3px solid blue;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.circle-one {
  animation: transition-circle 2s infinite;
}

.circle-two {
  animation: transition-circle 2s infinite 0.5s;
}

.circle-three {
  animation: transition-circle 2s infinite 1s;
}

.circle-three {
  animation: transition-circle 2s infinite 1.6s;
}

@keyframes transition-circle {
  0% {
    width: 0px;
    height: 0px;
    opacity: 1;
  }

  100% {
    width: 35px;
    height: 35px;
    opacity: 0;
  }
}
</style>