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

最新推荐文章于 2025-04-23 14:12:32 发布

原创最新推荐文章于 2025-04-23 14:12:32 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了一种在Vue项目中实现实现地图拖拽和缩放功能的方法。通过监听鼠标滚轮和鼠标按下事件，结合CSS样式调整，实现了地图的平移和缩放效果。同时，博客提到了将地图设置为背景图以避免缩放时出现的布局问题，并提供了move和rollImg两个关键方法的详细实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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拿到要缩放的元素