一.导入资源
import bgSrc from ‘@/assets/images/bg.png’ //背景图片
import markSrc from ‘@/assets/images/img-mark.png’ //标记图标

二.新增表单点标记



<el-button type=“primary” @click=“imgMark = true”>打开标点窗口

三增加方法
methods: {
// 绘制标记
setPoint(e) {
this.markerArr = []
e = e || window.event
const x = e.offsetX || e.layerX
const y = e.offsetY || e.layerY
const obj = { x: x + ‘px’, y: y + ‘px’, showModal: false }
this.markerArr.push(obj)
},
// 编辑标记
editPoit(index, item) {
this.markerArr = []
},
// 提交标记
submitMark() {
this.imgMark = false
if (this.markerArr.length > 0) {
this.form.x = this.markerArr[0].x.replace(‘px’, ‘’)
this.form.y = this.markerArr[0].y.replace(‘px’, ‘’)
}
},