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

要在Vue中开启百度地图热力图，你需要先引入百度地图JavaScript API，并在Vue组件中渲染一个包含地图的div元素。以下是一个简单的示例：

1. 在index.html中引入百度地图JavaScript API：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

2. 在Vue组件中定义一个方法来开启热力图：

methods: {
  openHeatmap() {
    // 创建地图实例
    const map = new BMap.Map('map-container')
    
    // 创建热力图实例
    const heatmapOverlay = new BMapLib.HeatmapOverlay({radius: 20})
    
    // 添加热力图到地图上
    map.addOverlay(heatmapOverlay)
    
    // 设置热力图数据
    const data = [
      {lng: 116.418261, lat: 39.921984, count: 50},
      {lng: 116.423332, lat: 39.916532, count: 80},
      // ...
    ]
    heatmapOverlay.setDataSet({data})
  }
}

3. 在Vue组件的template中添加一个包含地图的div元素和一个按钮来触发开启热力图的方法：

<template>
  <div>
    <div id="map-container" style="width: 100%; height: 500px;"></div>
    <button @click="openHeatmap">开启热力图</button>
  </div>
</template>

这样，当用户点击按钮时，就会在地图上生成一个带有热力图效果的图层。你可以根据自己的需求来调整热力图的半径、颜色、数据等参数。注意，在使用百度地图API时需要替换密钥。