vue+腾讯api实现热点图（小白可以借鉴）

1.注册腾讯api账户点击链接：lbs.qq.com/dev/console…

2.加载/配置腾讯地图的Javascript API 2-1在index.html引入

<!--引入Javascript API GL-->
<script
        charset="utf-8"
        src="https://map.qq.com/api/gljs?v=1.exp&key=你的key&libraries=visualization">
</script>
<!--引入/heat.js-->
<script src="https://mapapi.qq.com/web/lbs/visualizationApi/demo/data/heat.js"></script>

2-2 修改（build/webpack.base.conf.js）vue/cli 隐藏了这个文件，可以在vue.config.js中配置。具体想学习建议看官网：cli.vuejs.org/zh/guide/we… 这里直接展示配置：

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    configureWebpack: {
        externals: {
            TMap: 'TMap'
        }
    }
})

2-3在你需要展示热点图的页面引入腾讯地图的Javascript API，这里直接上代码（注释很细）

<template>
  <div id="app">
    <div id="container"></div>
  </div>
</template>
<!--引入Javascript API GL-->
<script
    charset="utf-8"
    src="https://map.qq.com/api/gljs?v=1.exp&key=你的key&libraries=visualization">
</script>
<!--引入/heat.js-->
<script src="https://mapapi.qq.com/web/lbs/visualizationApi/demo/data/heat.js"></script>

<script>
export default {
  name: 'App',
  mounted() {
    this.initMap()
  },
  data() {
    return {
      dataPoint: [
        //经度，纬度，值
        {lat: 40.040934, lng: 116.272677, count: 51},
        {lat: 40.040350, lng: 116.272666, count: 21},
      ]
    }
  },
  methods: {
    initMap() {
      //定义地图中心点坐标
      var center = new TMap.LatLng(40.040523, 116.273654);
      //定义map变量，调用TMap.Map构造函数创建地图
      var map = new TMap.Map("container", {
        zoom: 12, //设置地图缩放级别
        pitch: 45, // 设置地图俯仰角
        center: center, //设置地图中心点坐标
        mapStyleId: "style1", //个性化样式
      });
      //初始化热力图并添加至map图层
      var dot = new TMap.visualization.Heat({
        max: 180, // 热力最强阈值
        min: 0, // 热力最弱阈值
        height: 40, // 峰值高度
        radius: 30, // 最大辐射半径
      }).addTo(map)//将图层添加到map中
      //为dot图层添加数据
      dot.setData(heatData);
      dot.setData(this.dataPoint);
    }
  }
}
</script>

<style>
#app {
  padding: 0;
  margin: 0;
  width: 100%;
}
</style>