iot-fontend/src/views/iot/deviceMap/index.vue

<template>
  <a-layout>
    <a-layout-sider :resize-directions="['right']">
      <a-row>
      </a-row>
    </a-layout-sider>
    <a-layout-content>
      <div id="container"></div>
    </a-layout-content>
  </a-layout>
</template>

<script lang="ts" setup>
  import { onMounted, onUnmounted, ref } from 'vue';
  import AMapLoader from '@amap/amap-jsapi-loader';
  import { DeviceRecord, queryDeviceList } from '@/api/device';
  import "@amap/amap-jsapi-types";

  let map: any = null;
  const deviceList = ref<DeviceRecord[]>([]);
  AMapLoader.load({
    key: 'a4e80eed798a56451b226dcfca81b846', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      map = new AMap.Map('container', {
        // 设置地图容器id
        viewMode: '3D', // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
      });
      map.on('click', (e: any) => {
        // 获取点击位置的经纬度
        const lngLat = e.lnglat;
        const content = document.createElement('div');
        content.className = 'custom-content-marker';
        content.innerHTML = `
          <img src="https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png" alt="标记点" />
          <div class="close-btn">×</div>`;
        // 创建标记点
        const marker = new AMap.Marker({
          position: lngLat,
          content,
        });
        // 将标记点添加到地图上
        map.add(marker);
        // 监听删除按钮的点击事件
        const closeBtn = marker.getContent().querySelector('.close-btn');
        closeBtn.addEventListener('click', () => {
          map.remove(marker); // 移除标记点
        });
      });
    })
    .catch((e) => {
      console.log(e);
    });

  onMounted(() => {
    // 获取设备列表
    queryDeviceList({
      current: 1,
      size: 10,
    })
      .then((response) => {
        deviceList.value = response.data.records;
      })
      .catch((error) => {
        console.error('获取设备列表失败', error);
      });
  });

  // onUnmounted(() => {
  //   map?.destroy();
  // });

</script>

<style scoped>
  #container {
    width: 100%;
    height: 800px;
  }
  .custom-content-marker {
    position: relative;
    width: 25px;
    height: 34px;
  }

  .custom-content-marker img {
    width: 100%;
    height: 100%;
  }

  .custom-content-marker .close-btn {
    position: absolute;
    top: -6px;
    right: -8px;
    width: 15px;
    height: 15px;
    font-size: 12px;
    background: #ccc;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 15px;
    box-shadow: -1px 1px 1px rgba(10, 10, 10, .2);
  }

  .custom-content-marker .close-btn:hover{
    background: #666;
  }
</style>