vue2 openlearys 添加聚合点并且在添加聚合点前清除页面的聚合点和标注的代码

要实现添加聚合点并在添加前清除页面的聚合点和标注的代码，可以采用以下步骤：

1. 在Vue组件中引入高德地图API。

import AMapLoader from '@amap/amap-jsapi-loader';

2. 在组件的`mounted()`钩子函数中加载地图并设置相关属性。

mounted() {
  AMapLoader.load({
    key: 'your_amap_key',
    version: '2.0',
    plugins: ['AMap.MarkerClusterer', 'AMap.Geocoder'],
  }).then((AMap) => {
    this.map = new AMap.Map('map', {
      zoom: 10,
      center: [116.397428, 39.90923],
    });
    this.markerClusterer = new AMap.MarkerClusterer(this.map, [], {
      gridSize: 80,
      maxZoom: 18,
      zoomOnClick: true,
      renderClusterMarker: this.renderClusterMarker,
    });
    this.geocoder = new AMap.Geocoder({
      city: '北京市',
      batch: true,
    });
    this.addMarkers(); // 添加标注
  });
},

3. 添加方法`addMarkers()`，用于添加标注。

addMarkers() {
  // 清除聚合点和标注
  this.markerClusterer.clearMarkers();
  this.map.clearMap();

  // 添加标注
  const markers = [];
  for (let i = 0; i < this.points.length; i++) {
    const marker = new AMap.Marker({
      position: this.points[i].lnglat,
      title: this.points[i].title,
      extData: this.points[i],
    });
    markers.push(marker);
  }
  this.markerClusterer.setMarkers(markers);
  this.map.setFitView();
},

4. 在`addMarkers()`方法中，先清除之前页面上的聚合点和标注，然后再添加新的标注和聚合点。最后使用`setFitView()`方法调整地图视野以适应所有标注的位置。

5. 在某个按钮的点击事件中调用`addMarkers()`方法，即可实现添加新标注前清除之前标注和聚合点的功能。

<button @click="addMarkers">添加新标注</button>