vue界面点击按钮，在界面地图上显示分布点代码

好的，你可以按照以下步骤来实现：

1. 在Vue组件中引入地图相关的库，如百度地图API或者高德地图API等。

2. 在组件的data对象中定义地图需要的变量，如地图对象、标注点数组等。

3. 在mounted生命周期钩子函数中初始化地图对象和标注点数组。

4. 在界面中添加一个按钮，绑定一个点击事件方法。

5. 在点击事件方法中，先清除之前添加的标注点，然后根据需要添加新的标注点。

6. 最后，在地图上显示标注点即可。

以下是一个简单的示例代码：

<template>
  <div>
    <div id="map" style="width: 100%; height: 500px;"></div>
    <button @click="showPoints">显示分布点</button>
  </div>
</template>

<script>
import BMap from 'BMap';

export default {
  data() {
    return {
      map: null,
      pointArray: [
        {lng: 116.404, lat: 39.915},
        {lng: 116.418, lat: 39.921},
        {lng: 116.386, lat: 39.915},
        {lng: 116.397, lat: 39.925},
      ],
      markerArray: []
    };
  },

  mounted() {
    // 初始化地图
    this.map = new BMap.Map('map');
    this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);

    // 添加控件
    this.map.addControl(new BMap.NavigationControl());

    // 初始化标注点数组
    this.initMarkers();
  },

  methods: {
    // 初始化标注点
    initMarkers() {
      for (let point of this.pointArray) {
        let marker = new BMap.Marker(new BMap.Point(point.lng, point.lat));
        this.markerArray.push(marker);
        this.map.addOverlay(marker);
      }
    },

    // 显示标注点
    showPoints() {
      // 先清除之前添加的标注点
      for (let marker of this.markerArray) {
        this.map.removeOverlay(marker);
      }
      this.markerArray = [];

      // 添加新的标注点
      this.initMarkers();
    }
  }
};
</script>