vue中点击按钮开启关闭百度地图热力图

首先你需要在 Vue 组件中引入百度地图API和热力图插件。然后在组件中定义地图和热力图变量，在 mounted 钩子函数中初始化地图和热力图，并添加对应的事件监听器。最后，在点击按钮的时候，通过修改热力图的 visible 属性来实现开启和关闭热力图的效果。以下是一个简单的代码示例：

<template>
  <div>
    <div id="map"></div>
    <button @click="toggleHeatmap">Toggle Heatmap</button>
  </div>
</template>

<script>
import BMap from 'BMap';
import 'BMapLib.Heatmap';

export default {
  data() {
    return {
      map: null,
      heatmap: null,
      isHeatmapVisible: true
    }
  },
  mounted() {
    this.initMap();
    this.initHeatmap();
  },
  methods: {
    initMap() {
      this.map = new BMap.Map('map');
      this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
      this.map.enableScrollWheelZoom(true);
    },
    initHeatmap() {
      const points = []; // 热力图数据点数组
      const heatmapOpts = {
        radius: 20, // 热力图点半径
        gradient: { 0.5: 'blue', 0.65: 'rgb(117,211,248)', 0.7: 'rgb(0, 255, 0)', 0.9: '#ffea00', 1.0: 'red' }
      };
      this.heatmap = new BMapLib.HeatmapOverlay(heatmapOpts);
      this.map.addOverlay(this.heatmap);
      this.heatmap.setDataSet({ data: points });
      this.map.addEventListener('zoomend', () => {
        this.heatmap.adjustSize();
      });
    },
    toggleHeatmap() {
      this.isHeatmapVisible = !this.isHeatmapVisible;
      this.heatmap && (this.heatmap.visible = this.isHeatmapVisible);
    }
  }
}
</script>

注意：以上代码示例中的 `BMap` 和 `BMapLib.Heatmap` 是通过 `npm` 安装的百度地图 API 和热力图插件，你需要在项目中安装并引入对应的模块。