AMap.vue 中更新高德地图绘制圆形

src/views/map/AMap.vue

@@ -63,9 +63,11 @@ export default {
         ]
       }],
       path: [],
+      mapCircle: null,
+      circleEditor: null,
       showPositionDialog: false,
       showInput: false,
-      radius: 0,
+      radius: 1000,
       positionForm: {
         lng: null,
         lat: null
@@ -211,19 +213,21 @@ export default {
       this.map.add(circle)
       // 根据覆盖物范围调整视野
       this.map.setFitView([circle])
+      this.mapCircle = circle
 
       // 鼠标移入事件
       circle.on('mouseover', function() {
         console.log('鼠标移入')
       })
 
-      var that = this.map
+      var that = this
       // 引入圆形编辑器插件
       this.map.plugin(['AMap.CircleEditor'], function() {
         // 实例化圆形编辑器，传入地图实例和要进行编辑的圆形实例
-        var circleEditor = new AMap.CircleEditor(that, circle)
+        var circleEditor = new AMap.CircleEditor(that.map, circle)
         // 开启编辑模式
         circleEditor.open()
+        that.circleEditor = circleEditor
       })
     },
     onPathNavigator() {
@@ -283,6 +287,15 @@ export default {
     },
     clearCircle() {
       this.$message.info('清除图形')
+      if (this.mapCircle !== null) {
+        this.map.remove(this.mapCircle)
+        this.mapCircle = null
+      }
+
+      if (this.circleEditor !== null) {
+        this.circleEditor.close()
+        this.circleEditor = null
+      }
     }
   }
 }