在vue中开关百度地图的热力图显示

在 Vue 中开关百度地图的热力图显示，可以通过设置一个开关变量，并在该变量值改变时切换地图的样式，从而实现。具体实现步骤如下：

1. 在 Vue 组件中声明一个开关变量，用于控制热力图的显示状态。

<template>
  <div>
    <input type="checkbox" v-model="isHeatmapVisible" @change="toggleHeatmap" />
    <div id="map"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHeatmapVisible: false, // 热力图显示状态开关
      map: null // 地图对象
    }
  },
  mounted() {
    // 初始化地图对象
    this.map = new BMap.Map('map')
  },
  methods: {
    toggleHeatmap() {
      // 切换热力图的显示状态
      const styleJson = this.isHeatmapVisible ? [
        {
          featureType: 'heatmap',
          elementType: 'all',
          stylers: { visibility: 'on' }
        }
      ] : [
        {
          featureType: 'heatmap',
          elementType: 'all',
          stylers: { visibility: 'off' }
        }
      ]
      this.map.setMapStyle({ styleJson })
    }
  }
}
</script>

<style>
#map {
  width: 100%;
  height: 400px;
}
</style>

2. 在组件的 `mounted()` 钩子函数中，初始化地图对象，并将其赋值给组件的 `map` 属性。

3. 在组件的 `toggleHeatmap()` 方法中，根据开关变量 `isHeatmapVisible` 的值，设置地图样式中的热力图显示状态，并调用地图对象的 `setMapStyle()` 方法切换地图样式。

4. 在组件的模板中，使用一个复选框来绑定开关变量 `isHeatmapVisible`，并在复选框的 `change` 事件中调用 `toggleHeatmap()` 方法切换热力图的显示状态。

上述代码中，设置地图样式时，可以通过设置 `styleJson` 数组中的 `stylers` 属性来设置地图样式的具体内容。在该例中，将 `visibility` 设置为 `'on'` 或 `'off'` 即可控制热力图的显示状态。