根据鼠标的位置画出一个区域应该怎么画呢？现在可以获取到鼠标的起始位置了已经
weizhi() {
var _this=this
var box = document.getElementById("box");
var width=box.getBoundingClientRect().width
if(this.s<=3){
this.s++
if(this.s==1){
this.$message("您已选择地图区域")
}
//鼠标点击时
for(var i=0;i<3;i++){
if(this.delFunc != null){
box.removeEventListener("mousedown",this.delFunc)
}
this.delFunc = function (e) {
var lon=0
var lat=0
var left = box.offsetLeft;
var top = box.offsetTop;
this.x = e.pageX - left;
this.y = e.pageY - top;
this.lon = this.x - 180;
this.lat = this.y - 90;
_this.ruleForm.startlongitude=this.lon
_this.ruleForm.startlatitude=this.lat
// console.log("X轴坐标" + this.x + "\n" + "Y轴坐标" + this.y);
}
box.addEventListener("mousedown",this.delFunc)
}
//鼠标离开时 监听
for(var i=0;i<3;i++){
if(this.delFunc1 != null){
box.removeEventListener("mouseup",this.delFunc1)
}
this.delFunc1 = function (e) {
var lon2=0
var lat2=0
var left = box.offsetLeft;
var top = box.offsetTop;
this.x1 = e.pageX - left - this.x;
this.y1 = e.pageY - top - this.y;
this.lon2 = this.x1 - 180;
this.lat2 = this.y1 - 90;
_this.ruleForm.endlongitude=this.lon2
_this.ruleForm.endlatitude=this.lat2
// console.log("X轴坐标" + this.x1 + "\n" + "Y轴坐标" + this.y1);
}
box.addEventListener("mouseup",this.delFunc1)
}
box.addEventListener("mouseup",this.delFunc1);
}
},
你要用什么方式去实现划区域这个目标（在元素上层弄一个dom 元素？），或者你可以考虑一下 用canvas ,这要看你的业务需求了。