vue谷歌地图添加聚合和非聚合功能

Vue谷歌地图在实现聚合和非聚合功能时，通常利用Google Maps JavaScript API中的MarkerClusterer和MarkerOptions。以下是这两个功能的基本介绍：

1. **非聚合** (Non-Aggregated): 这是指地图上直接显示每个点标记（marker）。当你需要显示详细的位置信息，或者希望用户能够点击每一个单独的地点时，适合使用非聚合模式。在Vue中，你可以创建一个数组或对象，每个对象包含经纬度坐标和其他相关的数据，然后通过`setMarkers`或`addMarker`方法在地图上绘制这些点。

import { map } from 'vue-google-maps';

export default {
  components: {
    GoogleMap,
    // 其他组件...
  },
  data() {
    return {
      markers: [
        { lat: ..., lng: ..., title: '地点1' },
        // 更多点...
      ]
    };
  },
  mounted() {
    this.$refs.map.setMarkers(this.markers);
  }
}

2. **聚合** (Aggregation): 当地图上有大量点标记，使得界面看起来混乱时，可以使用聚合功能（Marker Clusterer）来合并相近的点。这会创建一个图标（通常是自定义的），当鼠标悬停或点击时，会显示包含多个点的小窗口。在Vue中，你需要先实例化一个`MarkerClusterer`对象，并传入你的点集。

import MarkerClusterer from 'vue-google-maps/components/overlays/MarkerClusterer.vue';

// 使用MarkerClusterer组件
<template>
  <div>
    <GoogleMap :center="mapCenter" ref="map">
      <MarkerClusterer :markers="clusteredMarkers" :zoomOnClick="true" />
    </GoogleMap>
  </div>
</template>

<script>
export default {
  // ...
  computed: {
    clusteredMarkers() {
      const groupedMarkers = groupBy(this.markers, marker => [marker.lat, marker.lng]);
      return Object.values(groupedMarkers).map(points => ({
        position: points[0].latLng,
        title: points.length + " 地点",
        children: points,
      }));
    },
    // ...
  },
  methods: {
    // ...
  }
}