需求

1. 底图是一张图片，
2. 要在图上做标记，
3. 对标记的位置有交互行为
4. 鼠标滚顶页面，标记位置不发生变化
5. 页面发生缩放，标记位置不发生变化

分析

<template>
  <div
    v-loading="loading"
    class="point-map"
    element-loading-text="加载中..."
    element-loading-background="rgba(0, 0, 0, 0.5)"
    element-loading-spinner="el-icon-loading"
  >
    <div
      id="mapBox"
      class="map"
    >
      <el-tooltip
        v-for="(item,index) in layInfo.layoutPointList"
        :key="item.id"
        effect="dark"
        placement="top"
      >
        <!-- 内容 -->
        <div slot="content">
          <div
            v-for="(pointName, index) in item.info"
            :key="index"
          >
            <div v-if="index ==0">
              {{ item.name }}
            </div>
            {{ pointName || 暂无 }}
          </div>
        </div>

        <!-- 点 -->
        <div
          v-if="index < 8"
          class="point-box-lay"
          :style="{
            top: pointPosition[index].y,
            left: pointPosition[index].x,
          }"
          @click="handelClickPoint"
        >
          <div
            class="point"
            :style="{ background: '#23dd10'}"
          />
        </div>
      </el-tooltip></div>
  </div>
</template>
<script>
import { createRandomId } from '@/utils/myFunction'
export default {
  name: '',
  components: {},
  props: {
    layInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      // layInfo: {
      //   layoutPointList: [{
      //     fontColor: '#fff',
      //     id: '1695966252142428162',
      //     x: '73.40%',
      //     y: '11.2%',
      //     nameList: ['key1：value1', 'key2：value2', 'key3：value3'] // 实时获取数据
      //   },
      //   {
      //     fontColor: '#fff',
      //     id: '1695966252142428162',
      //     nameList: ['CK002-ΔN', 'CK002-ΔE', 'CK002-ΔH'], // 实时获取数据
      //     x: '73.40%',
      //     y: '17.3%'
      //   }]
      // },
      rightMenu: false,
      loading: false,
      visible: false,

      defaultPointStyle: {
        x: '0%',
        y: '0%',
        placement: 'column',
        bgColor: '#1e90ff',
        fontColor: '#fff'
      },
      preview: '/api/fileEntity/common/preview?id=',
      createRandomId,
      srcList: [

      ],
      pointPosition: [
        {
          x: '73.40%',
          y: '17.3%'
        },
        {
          x: '73.40%',
          y: '11.2%'
        },
        {
          x: '31.40%',
          y: '13.3%'
        },
        {
          x: '26.40%',
          y: '11.2%'
        },
        {
          x: '13.40%',
          y: '18.3%'
        },
        {
          x: '43.40%',
          y: '14.2%'
        },
        {
          x: '31.40%',
          y: '17.3%'
        },
        {
          x: '76.40%',
          y: '11.2%'
        }
      ]
    }
  },
  computed: {
  },
  watch: {

  },
  created() { },
  mounted() {
    console.log(1001, this.layInfo)
  },
  beforeDestroy() { },
  methods: {
    // 点位点击
    handelClickPoint() {
      console.log(121312)
    }
  }
}
</script>
<style lang ="scss"  scoped>
#mapBox{
  background: url(1.png) 0% 0% / 100% 100% no-repeat;
}
.point-map {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  > .map {
    height: 100%;
    position: relative;
    > .point-box-lay {
      transform: scale(0.8);
      transition: transform 0.2s;
      user-select: none;
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      &:hover {
        cursor: pointer;
        transform: scale(1);
      }
      > .el-image {
        height: 50px;
        width: 30px;
      }
      > .point {
        border-radius: 50%;
        height: 14px;
        width: 14px;
        background: #0580e4;
      }
      > .data-box {
        font-weight: bold !important;
        letter-spacing: 1px;
        font-size: 12px;
        padding: 2px 4px;
        margin: 5px;
        line-height: 1.2em;
        border-radius: 4px;
        /* word-break: break-all; */
        word-wrap: break-word;
        background: #0580e4;
        color: white;
        > div {
          font-weight: bold !important;
        }
      }
    }
  }
}
.data-box-nodata {
  background: red !important;
  color: white !important;
  letter-spacing: 2px;
}
</style>