Vue Baidu Map百度地图圆形覆盖物，设置半径编辑联动

最近要做一个圆形覆盖物，效果如下：

直接上代码吧

<template><div class="container"><div id="map" ref="map" /><div class="circle-box" v-show="circleShow"><Inputv-model="circlePath.radius"type="number"clearablestyle="width: 200px"@on-keyup="changeRadius"@on-change="changeRadius"/></div></div>
</template>data(){return{circlePath: {center: {lng: 118.81745852770722,lat: 32.03724853269305,},radius: 3000,},circleArr : [], //存储circle覆盖物的数组circleShow: false}
}getCircle() {//左上角input是否展示this.circleShow = true;//初始化地图this.bmap = new BMap.Map("map", { enableMapClick: false });this.bmap.centerAndZoom(new BMap.Point(117.744885, 39.113836), 13);this.bmap.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放let point = this.circlePath.center;let radius = this.circlePath.radius;let circle = new BMap.Circle(point, radius, {strokeColor: "blue",fillOpacity: 0.3,strokeWeight: 1,strokeOpacity: 0.3,}); //创建圆this.bmap.addOverlay(circle);circle.enableEditing();this.circleArr.push(circle);if (point != null) {circle.addEventListener("lineupdate", this.updateCirclePath);}},showRadius(obj) {if (obj.radius) {this.circlePath.radius = obj.radius;} else {this.circlePath.radius = circle.getRadius();}},changeRadius() {let point = this.circlePath.center;//清除圆形覆盖物for (let i = 0; i < this.circleArr.length; i++) {this.bmap.removeOverlay(this.circleArr[i]);}let circleRadius = parseInt(this.circlePath.radius); //获取用户设置的半径值//清除完毕后重新制作圆形覆盖物let circle = new BMap.Circle(point, circleRadius, {strokeColor: "blue",fillOpacity: 0.3,strokeWeight: 1,strokeOpacity: 0.3,});circle.setRadius(circleRadius); //设置圆形覆盖物的半径this.bmap.addOverlay(circle); //将圆形覆盖物添加到地图上circle.enableEditing(); //设置圆形覆盖物可编辑this.circleArr.push(circle); //将该园形覆盖物存于数组中,以便再次设置之前进行清除//调用showRadius方法this.showRadius({point: circle.point,radius: circleRadius,});if (point != null) {//为圆行覆盖物添加监听事件circle.addEventListener("lineupdate", this.updateCirclePath);}},updateCirclePath(e) {this.circlePath.center = e.target.getCenter();this.circlePath.radius = e.target.getRadius();let center = e.target.getCenter();let radius = e.target.getRadius();this.showRadius({point: center,radius: radius});},//清除覆盖物hideCircle() {this.circleShow = false;for (let i = 0; i < this.circleArr.length; i++) {this.bmap.removeOverlay(this.circleArr[i]);}},