高德地图-点聚合-点击事件（弹出窗口）-vue

在Vue中，你可以使用高德地图的点聚合和点击事件来实现点聚合的点击弹窗功能。以下是一个简单的示例：

1. 首先，确保你已经安装并导入了高德地图的Vue组件库。
2. 在你的Vue组件中，你可以这样使用高德地图：

<template>
  <div id="map" style="width: 100%; height: 400px;"></div>
</template>
 
<script>
import AMap from 'AMap'; // 确保这里是你安装的高德地图Vue组件库
 
export default {
  name: 'MapComponent',
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 初始化地图
      let map = new AMap.Map('map', {
        zoom: 11,
        center: [116.397428, 39.90923] // 设置中心点坐标
      });
 
      // 添加点聚合
      let markerClusterer = new AMap.MarkerClusterer(map, [], {
        gridSize: 80
      });
 
      // 模拟点的数据
      let points = [
        { position: [116.368904, 39.913423], name: '点1' },
        // ... 更多点数据
      ];
 
      // 添加点
      for (let i = 0; i < points.length; i++) {
        let marker = new AMap.Marker({
          position: points[i].position,
          map: map
        });
 
        marker.content = `<div>${points[i].name}</div>`; // 点的内容
 
        AMap.event.addListener(marker, 'click', this.openInfoWindow); // 绑定点击事件
        markerClusterer.addMarker(marker); // 将点添加到点聚合中
      }
    },
    openInfoWindow(e) {
      // 点击打开信息窗口
      let infoWindow = new AMap.InfoWindow({
        content: e.target.content,
        offset: new AMap.Pixel(0, -30)
      });
      infoWindow.open(e.target.getMap(), e.target.getPosition());
    }
  }
};
</script>

在这个示例中，我们首先在mounted钩子中初始化了地图，并添加了点聚合。然后，我们创建了一个模拟点的数组，并为每个点创建了地图上的标记。我们还为每个标记添加了点击事件，当点击标记时，会通过openInfoWindow方法打开一个信息窗口，显示点的内容。