vue-amap圆形编辑完获取半径中心点

来源:互联网 发布:淘宝悠悠球店铺 编辑:程序博客网 时间:2024/05/13 23:48

1.今天做项目时候 用vue的插件 vue-amap圆形编辑,但是有个问题,就是说,添加圆时候 我给了 默认值,但是最后向后台传参数的时候,还是传的默认值,就是说 新圆的半径没有赋值给旧圆,
2.继续找
3.找到了 events 事件,

move {type, target, lnglat} 编辑状态下, 拖拽圆心调整圆形位置时触发此事件type: 事件类型 target: 发生事件的目标对象 lnglat: 调整后圆的圆心坐标
adjust {type, target, radius} 编辑状态下,鼠标调整圆形半径时,触发此事件 type: 事件类型 target: 发生事件的目标对象 radius: 调整后圆的半径,单位:米

圆的事件,
运用
var cir2 = {
center: [this.center[0]+0.02,this.center[1]+0.03],//this.center
radius:1000,
events:{
adjust:(o)=>{
console.log(o);//调整后的半径
//circleOne.radius = o.radius;
for(var i= 0; i< this.circles.length;i++){
this.circles[o.target.G.vid].radius = o.radius;
}
},
move:(t)=>{
console.log(t.lnglat.lng);//调整后的圆心坐标
for(var i= 0; i< this.circles.length;i++){
this.circles[t.target.G.vid].center = [t.lnglat.lng,t.lnglat.lat];
}
//circleOne.center = [t.lnglat.lng,t.lnglat.lat];
},
click:(t)=>{
alert(“这是第”+(parseInt(t.target.G.vid)+1)+”个圆形”);//index
}
}
}
this.circles.push(cir2)
4.将调整后的半径和 圆心坐标赋值给旧圆
5.完成

6.重要的一点

<el-amap-circle v-for="(circle, index) in circles" :editable="editable" strokeOpacity="0.7" strokeColor="black" :fillColor="circle.fillColor"  :center="circle.center" :vid="index" :radius="circle.radius" :ref="`circle_${index}`" fillOpacity="0.25" :events="circle.events"></el-amap-circle>

:vid=”index” vid 必须是index 当前圆的下标,如果不是 那么上面这个代码不好使的