基于vue的地图缩放以及地图实时监控

<div
      class="order left img"
      @mousewheel.capture="rollImg('order')"
      @mousedown="move"
      ref="order"
    >

通过类名order将地图设置为底部图片

 <img
        v-for="(item, index) in imglist"
        :key="index"
        :src="item.url"
        alt=""
        @click="openveow(item.id)"
        class="camera"
        :style="{ left: item.left + 'px', top: item.left + 'px' }"
      />

监控探头图片为循环生成位置由配置决定

注意：要实现缩放以及地图拖拽需要将地图设置为背景图否则当缩放时会出现各种奇奇怪怪的bug

methods: {
    move(e) {
      e.preventDefault();
      // 获取元素
      var left = document.querySelector(".left");
      var img = document.querySelector(".img");
      var x = e.pageX - img.offsetLeft;
      var y = e.pageY - img.offsetTop;
      // 添加鼠标移动事件
      left.addEventListener("mousemove", move);
      function move(e) {
        img.style.left = e.pageX - x + "px";
        img.style.top = e.pageY - y + "px";
      }
      // 添加鼠标抬起事件，鼠标抬起，将事件移除
      img.addEventListener("mouseup", function () {
        left.removeEventListener("mousemove", move);
      });
      // 鼠标离开父级元素，把事件移除
      left.addEventListener("mouseout", function () {
        left.removeEventListener("mousemove", move);
      });
    },
    rollImg(value) {
      var zoom = parseInt(this.$refs[value].style.zoom) || 100;
      zoom += event.wheelDelta / 12;

      this.$refs[value].style.zoom = zoom + "%";

      return false;
    },
  },

move为拖拽事件   rollImage为缩放事件通过ref拿到要缩放的元素