在Vue中实现热点图的方式

在Vue组件的模板中使用map和area元素创建热点图

<template>
  <div>
    <img src="my-image.jpg" usemap="#hotspots">
    <map name="hotspots">
      <area shape="rect" coords="0,0,100,100" @click="handleClick('热点1')">
      <area shape="rect" coords="100,100,200,200" @click="handleClick('热点2')">
    </map>
  </div>
</template>

在以上示例中，使用img元素显示图片，并使用map元素创建一个名为"hotspots"的热点区域。在map元素中，使用area元素定义了两个矩形形状的热点区域，并为每个热点区域绑定了一个click事件，当热点被点击时会调用handleClick方法。

在Vue组件的methods选项中定义handleClick方法

<script>
export default {
  methods: {
    handleClick(title) {
      console.log(`点击了${title}`);
    }
  }
};
</script>

在以上示例中，handleClick方法会在热点区域被点击时调用，并接收热点的标题作为参数，然后将该标题输出到控制台。

注意，上述示例中的img和map元素中的图片和热点坐标都是静态的，如果您需要动态生成热点图，可以根据数据使用v-for指令动态生成area元素，并将热点坐标和标题等数据绑定到元素属性中。