vue 高德api Map事件方法封装

高德api关于鼠标事件方法的使用
mapUtils.js文件

export function mapMousePrompt(gid ,map,mo){ // 鼠标点击提示
	// gid 业务逻辑需要，可以忽略
  	// map 地图
	// mo ， 存放方法的对象，封装的最好传个对象，
  map.off("mousedown", mo.mousedownFun);  // 鼠标按下
  map.on("mousedown",(mo.mousedownFun = function (e) {
      if (gid === 3 || gid === 4) {
        mo.mouseTipPrompt = '释放鼠标完成绘制'
      }
      // console.log('鼠标按下',e,mo.mouseTipPrompt);
    })
  );
  map.off("mouseup", mo.mouseupFun);  // 鼠标抬起
  map.on("mouseup",(mo.mouseupFun = function (e) {
      if (gid === 3 || gid === 4) {
        mo.mouseTipPrompt = false
        // console.log('鼠标按下',e,mo.mouseTipPrompt);
      }
    })
  );
  
  let letE = 0
  map.off("click", mo.clickFun);  // 鼠标单击
  map.on("click",(mo.clickFun = function (e) {
      if (gid === 1 || gid === 2) {
        letE += 1
        mo.mouseTipPrompt = '点击继续绘制' // 第一次点击
        // console.log('点击继续绘制',e,mo.mouseTipPrompt);
        if (letE == 2) {	// 第二次点击
          mo.mouseTipPrompt = ' 双击完成绘制'
        }
      }
    })
  );

  map.off("dblclick", mo.dblclickFun);  // 鼠标双击
  map.on("dblclick",(mo.dblclickFun = function (e) {
      mo.mouseTipPrompt = false
      console.log(map);
      // map.clearEvents('click')
    })
  )

  map.off("rightclick", mo.rightClickfun);  // 鼠标右击
  map.on( "rightclick", (mo.rightClickfun = function (e) {
      mo.mouseTipPrompt = false
      // map.clearEvents('click')
    })
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

clearEvents 清除方法无效，不知道怎么用，没有效果/(ㄒoㄒ)/~~

index.vue
页面中使用

data:{
	reutrn(){
	map:null
	mouseFunObj: {
	       mouseTipPrompt:"",  // 鼠标的提示
	       mouseToolDraw: null,
	       rightClickfun:null,
	       mousedownFun:null,  // 鼠标按下
	       mouseupFun:null,  // 鼠标抬起
	       clickFun:null,  // 鼠标抬起
	       dblclickFun:null, // 鼠标双击
	     },
     }
 }
methods:{
	bindMapMouse(){	// 绑定事件方法
		let mo = self.mouseFunObj
		let gid
		mapMousePrompt(gid,self.map,mo) // 添加鼠标点击提示
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22