vue 点击对图片进行标注并记录当前的坐标

功能如下：

1、在图片区域内，点击鼠标左键对图片进行标注，并添加标注图片 ；

2、鼠标右键点击 已标注图片 删除当前标注。

<div class="myBiaoZhu" id="myBiaoZhuDiv">
      <img
        id="myBiaoZhu"
        :src="parseImgUrl"
        style="width:1000px;height:638px;"
        alt=""
      />
    </div>

 

 data() {
    return {
      parseImgUrl:"",
      pointImg: require("../../../public/01.svg"),
      pointSize: 10, //点的大小
      banMa: [],
    };
  },

 

mounted() {
    document.getElementById("myBiaoZhu").oncontextmenu = e => {
      if (e && e.preventDefault) {
        //阻止默认浏览器动作(W3C)
        e.preventDefault();
      } else {
        //IE中阻止函数器默认动作的方式
        window.event.returnValue = false;
      }
      return false;
    }; //阻止冒泡行为和默认右键菜单事件
    // console.log(196, this.parseImgUr == undefined);

    document.getElementById("myBiaoZhu").onmousedown = e => {
      e = e || window.event;
      // console.log(this.serialNumber);
      // console.log(this.serialNumber.length);
      // debugger;
      if (this.serialNumber.length == 0 && this.parseImgUrl.length > 0) {
        // console.log(this.banMa.length);
        this.$refs.selectEquipment.visible = true;
        this.$refs.selectEquipment.formConfig.isShowSubmitBtn = true;
        return false;
      }
      if (e.button !== 2 ) {
        //判断是否右击
        /*
      event.screenX是屏幕左上角到鼠标当前位置的x轴距离;
      event.clientX是浏览器左上角到鼠标当前位置的x轴距离;
      event.setoffX是鼠标当前点击控件左上角到鼠标当前位置的x轴距离;
      */
        var x = e.offsetX || e.layerX;
        var y = e.offsetY || e.layerY;
        console.log(x, y);
        var myImg = document.querySelector("#myBiaoZhu");
        var currWidth = myImg.clientWidth;
        var currHeight = myImg.clientHeight;
        var ProportionWidthInImg = x / currWidth;
        var ProportionHeightInImg = y / currHeight;
        // console.log("图片比例高度："+ProportionHeightInImg)
        // console.log("图片比例宽度："+ProportionWidthInImg)
        this.banMa.push({
          // id: this.banMa.length + 1,
          positionLat: x,
          positionLng: y,
  
        });
        this.createMarker(x, y);
      }
    };
  },

 

methods: {
      //画点
      createMarker(x, y) {
      var div = document.createElement("div");
      div.className = "marker";
      div.id = "marker" + this.banMa.length;
      y =
        y + document.getElementById("myBiaoZhu").offsetTop - this.pointSize / 2;
      x =
        x +
        document.getElementById("myBiaoZhu").offsetLeft -
        this.pointSize / 2;
      div.style.width = this.pointSize * 4.4 + "px";
      div.style.height = this.pointSize * 5.8 + "px";
      // div.style.backgroundColor = this.pointColor;
      div.style.background = "url(" + this.pointImg + ") no-repeat";
      div.style.position = "absolute";
      div.style.left = x + "px";
      div.style.top = y + "px";
      div.oncontextmenu = e => {
        //阻止冒泡行为和默认右键菜单事件，同时删除该点
        var id = e.target.id;
        document.getElementById("myBiaoZhuDiv").removeChild(div);
        // this.banMa = this.banMa.filter(
        //   item => item.id != id.slice(6, id.length)
        // );
        this.banMa = [];
        this.banMa.push({ regionId: this.regionId });
        this.unbunding(); // 解绑接口 用不到删除即可
        if (e && e.preventDefault) {
          //阻止默认浏览器动作(W3C)
          e.preventDefault();
        } else {
          //IE中阻止函数器默认动作的方式
          window.event.returnValue = false;
        }
        return false;
      };
      document.getElementById("myBiaoZhuDiv").appendChild(div);
      this.submitEqArr();  // 提交接口 用不到删除即可
    },
    },

 参考链接：https://blog.csdn.net/m0_46627730/article/details/106583908?utm_term=vue%E5%9B%BE%E7%89%87%E7%82%B9%E5%87%BB%E4%BD%8D%E7%BD%AE&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~sobaiduweb~default-1-106583908&spm=3001.4430