vue3 数据可视化大屏 开发中，有个要求，需要显示自定义图标，并且可以点击实现弹窗，可以通过筛选框来实现图标筛选。

演示实例

引入高德地图

<script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=your key&plugin=AMap.Geocoder"
    ></script>
    <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

代码

<template>
  <div class="maps">
    <div class="info">
      <el-select v-model="type" class="m-2" placeholder="Select" size="large">
        <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </div>
    <div ref="allmap" class="bodymap"></div>
  </div>
</template>

<script>
import baojing from './images/baojing.png'
import gongcheng from './images/gongcheng.png'
import xuexiao from './images/xuexiao.png'
import {mapState, mapActions} from 'pinia'
import {useCounterStore} from '@/store/index'

const store = useCounterStore()
export default {
  data() {
    return {
      active: 0,
      show: false,
      hover: 0,
      map: null,
      type: -1,
      typeList: [
        {
          value: -1,
          label: '全部',
        }, {
          value: 0,
          label: '警报器',
        }, {
          value: 1,
          label: '人防',
        }, {
          value: 2,
          label: '应急',
        },
      ]
    }
  },
  computed: {
    ...mapState(useCounterStore, ['jingbao', 'renfang', 'yingji', 'itemIndex', 'colorList']),
  },
  components: {},
  created() {

  },
  watch: {
    type() {
      if (this.type != -1) {
        store.changeItemIndex(this.type)
      }
      this.getGdMap()
    },
  },

  mounted() {
    this.getGdMap()
  },

  methods: {
    // 高德地图相关
    getGdMap() {
      var that = this;
      that.map = new AMap.Map(this.$refs.allmap, {
        scrollWheel: true,
        viewMode: '2D',
        resizeEnable: true,
        zoom: 13,
        maxZoom: 30,
        minZoom: 0,
        center: [121.22989570399066, 31.02782839832306],
      });
      that.addMask()
    },
    addMask() {
      var that = this;
      if (this.type == -1) {
        var list = this.renfang;
        list.forEach((type) => {
          that.addMarker(type.value[0], type.value[1], type)
        });
        var list1 = this.jingbao;
        list1.forEach((type) => {
          that.addMarker(type.value[0], type.value[1], type)
        });
        var list2 = this.yingji;
        list2.forEach((type) => {
          that.addMarker(type.value[0], type.value[1], type)
        });
      } else {
        var list = store.getList;
        list.forEach((type) => {
          that.addMarker(type.value[0], type.value[1], type)
        });
      }
    },
    getclear() {
      var that = this;
      let data = that.map.getAllOverlays();
      for (var i = 0; i < data.length; i++) {
        that.map.remove(data[i])
      }
    },
    markerClick(e) {
      var that = this;
      var content = ''
      // 警报器
      if (e.target.w.extData.type == 0) {
        content = `<div class="gdPopWin">
               <h3>设备编号:${e.target.w.extData.number}</h3>
               <p>设备名称:${e.target.w.extData.name}</p>
               <p>设置单位名称:${e.target.w.extData.name2}</p>
               <p>所属地区:${e.target.w.extData.address}</p>
               <p>警报器型号:${e.target.w.extData.model}</p>
               <p>警报器功率:${e.target.w.extData.power}</p>
               <p>控制器型号:${e.target.w.extData.model2}</p>
               <p>专管员:${e.target.w.extData.username}</p>
               <p>专管员联系方式:${e.target.w.extData.Contact}</p>
               <p>供应商:${e.target.w.extData.supplier}</p>
          <div>`
      }
      if (e.target.w.extData.type == 1) {
        // 人防工程信息
        content = `<div class="gdPopWin">
               <h3>工程名称:${e.target.w.extData.name1}</h3>
               <p>建设单位:${e.target.w.extData.name2}</p>
               <p>工程类型:${e.target.w.extData.gongcheng}</p>
               <p>战时用途:${e.target.w.extData.zhanshi}</p>
               <p>平时用途:${e.target.w.extData.pingshi}</p>
               <p>工程隶属:${e.target.w.extData.gongcheng}</p>
               <p>建设地点:${e.target.w.extData.address}</p>
               <p>口部数量（个）:${e.target.w.extData.chukou}</p>
               <p>建筑面积:${e.target.w.extData.jianzhu}</p>
               <p>使用面积:${e.target.w.extData.shiyong}</p>
               <p>工程健全状态:${e.target.w.extData.zhuangtai}</p>
               <p>防常规武器等级:${e.target.w.extData.dengji}</p>
               <p>防核武器等级:${e.target.w.extData.fanghe}</p>
          <div>`
      }
      if (e.target.w.extData.type == 2) {
        // 应急避進场所其本信息
        content = `<div class="gdPopWin">
               <h3>建成应急避难场所单位名称:${e.target.w.extData.name}</h3>
               <p>建设单位:${e.target.w.extData.name2}</p>
               <p>工程类型:${e.target.w.extData.gongcheng}</p>
               <p>战时用途:${e.target.w.extData.zhanshi}</p>
               <p>平时用途:${e.target.w.extData.pingshi}</p>
               <p>工程隶属:${e.target.w.extData.gongcheng}</p>
               <p>建设地点:${e.target.w.extData.address}</p>
               <p>口部数量（个）:${e.target.w.extData.chukou}</p>
               <p>建筑面积:${e.target.w.extData.jianzhu}</p>
               <p>使用面积:${e.target.w.extData.shiyong}</p>
               <p>工程健全状态:${e.target.w.extData.zhuangtai}</p>
               <p>防常规武器等级:${e.target.w.extData.dengji}</p>
               <p>防核武器等级:${e.target.w.extData.fanghe}</p>
          <div>`
      }
      var infoWindow = new AMap.InfoWindow({
        anchor: 'middle-left',
        content: content,
      });
      infoWindow.open(that.map, e.target.w.extData.value)
    },
    addMarker(x, y, info) {
      var marker = new AMap.Marker({
        icon: baojing,
        position: [x, y],
        offset: new AMap.Pixel(-50, -30),
        extData: info
      });
      marker.on('click', this.markerClick)
      var markerContent = document.createElement("div");
      var markerImg = document.createElement("img");
      markerImg.class = "markerlnglat";
      markerImg.width = '30'
      markerImg.height = '30'
      if (info.type == 0) {
        markerImg.src = baojing;

      }
      if (info.type == 1) {
        markerImg.src = xuexiao;

      }
      if (info.type == 2) {
        markerImg.src = gongcheng;
      }

      markerContent.appendChild(markerImg);
      var markerSpan = document.createElement("span");
      markerSpan.class = 'marker';
      markerContent.appendChild(markerSpan);
      marker.setPosition([x, y]);
      marker.setContent(markerContent);
      marker.setMap(this.map);
    },
  },
  filters: {}
}
</script>

<style lang="scss">
.bm-view {
  width: 100%;
  height: 100%;
  position: relative;
}

.bodymap {
  width: 100%;
  height: 100%;
  position: relative;
}

.maps {
  width: 100%;
  height: 100%;
  position: relative;

  .info {
    position: absolute;
    right: 20px;
    top: 20px;
    height: 60px;
    z-index: 100;
    padding: 0 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    background: rgba(8, 31, 66, 1.00);
    border-radius: 5px;

    .el-input {
      background: rgba(10, 32, 68, 1.00);
      border: 1px solid rgba(1, 119, 255, 1.00);
    }

  }
}

.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
  background: none !important;
}

.gdPopWin {
  background: rgba(9, 31, 67, 1.00);
  width: 400px;
  height: auto;
  min-height: 200px;

  p {
    line-height: 30px;
    color: #fff;
    font-size: 14px;
  }

  h4 {
    font-size: 16px;
  }
}

.amap-info-content {
  background: rgba(10, 31, 67, 1.00);
}

.middle-left .amap-info-sharp {
  border-right: 8px solid rgba(10, 31, 67, 1.00);
}

.markerlnglat {
  img {
    width: 40px;
  }
}

.infoTitle {
  margin-left: 20px;
  margin-right: 20px;
}

.amap-ranging-label span {
  color: #000;
}
</style>