vue3和ts使用HeatmapOverlay加载热力图

在Vue3中使用HeatmapOverlay加载热力图需要先引入BaiduMap API，并在组件中创建地图实例和HeatmapOverlay实例。以下是一个简单的示例：

<template>
  <div id="map" style="height: 600px;"></div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
declare const BMap: any;

export default defineComponent({
  mounted() {
    // 创建地图实例
    const map = new BMap.Map('map');
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    map.enableScrollWheelZoom();

    // 创建热力图实例
    const heatmapOverlay = new BMapLib.HeatmapOverlay({
      radius: 20,
      gradient: {
        0.2: 'rgb(0, 0, 255)',
        0.4: 'rgb(0, 255, 0)',
        0.6: 'yellow',
        0.8: 'rgb(255, 0, 0)',
        1.0: 'rgb(255, 255, 255)',
      },
    });

    // 添加热力图到地图中
    map.addOverlay(heatmapOverlay);

    // 模拟热力图数据
    const points = [];
    for (let i = 0; i < 1000; i++) {
      const point = new BMap.Point(
        116.404 + Math.random() * 0.1,
        39.915 + Math.random() * 0.1
      );
      points.push({
        lng: point.lng,
        lat: point.lat,
        count: Math.random() * 10,
      });
    }

    // 设置热力图数据
    heatmapOverlay.setDataSet({ data: points, max: 10 });
  },
});
</script>

需要注意的是，BaiduMap API的类型定义文件可能不完整，需要手动添加`@types/baidumap-web-sdk`包来解决类型问题。