---
title: "示例：标记聚类"
description: "使用标记聚类组件对密集的 Google Maps 标记进行分组。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/scripts/google-maps/guides/marker-clustering"
last_updated: "2026-08-11T09:33:14.256Z"
---

<code-group>
<google-maps-clustering-demo label="演示">



</google-maps-clustering-demo>

```vue [源代码]
<script setup lang="ts">
const locations = [
  { id: 1, position: { lat: -33.8568, lng: 151.2153 }, name: 'Opera House' },
  { id: 2, position: { lat: -33.8688, lng: 151.2093 }, name: 'Town Hall' },
  { id: 3, position: { lat: -33.8708, lng: 151.2073 }, name: 'QVB' },
  { id: 4, position: { lat: -33.8615, lng: 151.2055 }, name: 'Barangaroo' },
  { id: 5, position: { lat: -33.8523, lng: 151.2108 }, name: 'Circular Quay' },
  { id: 6, position: { lat: -33.8750, lng: 151.2050 }, name: 'Darling Harbour' },
  // ...更多位置
]
</script>

<template>
  <ScriptGoogleMaps
    :map-options="{
      center: { lat: -33.863, lng: 151.210 },
      zoom: 13,
    }"
  >
    <ScriptGoogleMapsMarkerClusterer>
      <ScriptGoogleMapsMarker
        v-for="loc in locations"
        :key="loc.id"
        :position="loc.position"
      >
        <ScriptGoogleMapsInfoWindow>
          <strong>{{ loc.name }}</strong>
        </ScriptGoogleMapsInfoWindow>
      </ScriptGoogleMapsMarker>
    </ScriptGoogleMapsMarkerClusterer>
  </ScriptGoogleMaps>
</template>
```

</code-group>

`ScriptGoogleMapsMarkerClusterer` 封装了官方的 [`@googlemaps/markerclusterer` 库](https://googlemaps.github.io/js-markerclusterer/)，在较低的缩放级别下将附近的标记归入聚类。

## 安装

需要 `@googlemaps/markerclusterer` 作为对等依赖：

```bash
pnpm add @googlemaps/markerclusterer
```

## 基础聚类

子标记会自动注册和注销。

```vue
<script setup lang="ts">
const locations = [
  { id: 1, position: { lat: -33.8568, lng: 151.2153 }, name: 'Opera House' },
  { id: 2, position: { lat: -33.8688, lng: 151.2093 }, name: 'Town Hall' },
  { id: 3, position: { lat: -33.8708, lng: 151.2073 }, name: 'QVB' },
  { id: 4, position: { lat: -33.8615, lng: 151.2055 }, name: 'Barangaroo' },
  { id: 5, position: { lat: -33.8523, lng: 151.2108 }, name: 'Circular Quay' },
  { id: 6, position: { lat: -33.8750, lng: 151.2050 }, name: 'Darling Harbour' },
]
</script>

<template>
  <ScriptGoogleMaps
    :map-options="{
      center: { lat: -33.863, lng: 151.210 },
      zoom: 14,
    }"
  >
    <ScriptGoogleMapsMarkerClusterer>
      <ScriptGoogleMapsMarker
        v-for="loc in locations"
        :key="loc.id"
        :position="loc.position"
      />
    </ScriptGoogleMapsMarkerClusterer>
  </ScriptGoogleMaps>
</template>
```

## 与信息窗口结合聚类

将聚类与信息窗口结合，以便用户在放大后可以点击单个标记。

```vue
<script setup lang="ts">
const locations = [
  {
    id: 1,
    position: { lat: -33.8568, lng: 151.2153 },
    name: 'Opera House',
    description: 'World-famous performing arts center',
  },
  {
    id: 2,
    position: { lat: -33.8688, lng: 151.2093 },
    name: 'Town Hall',
    description: 'Historic civic building',
  },
  {
    id: 3,
    position: { lat: -33.8708, lng: 151.2073 },
    name: 'QVB',
    description: 'Romanesque Revival shopping arcade',
  },
  {
    id: 4,
    position: { lat: -33.8615, lng: 151.2055 },
    name: 'Barangaroo',
    description: 'Waterfront precinct',
  },
  {
    id: 5,
    position: { lat: -33.8523, lng: 151.2108 },
    name: 'Circular Quay',
    description: 'Ferry terminal and transport hub',
  },
]
</script>

<template>
  <ScriptGoogleMaps
    :map-options="{
      center: { lat: -33.863, lng: 151.210 },
      zoom: 13,
    }"
  >
    <ScriptGoogleMapsMarkerClusterer>
      <ScriptGoogleMapsMarker
        v-for="loc in locations"
        :key="loc.id"
        :position="loc.position"
      >
        <ScriptGoogleMapsInfoWindow>
          <h3>{{ loc.name }}</h3>
          <p>{{ loc.description }}</p>
        </ScriptGoogleMapsInfoWindow>
      </ScriptGoogleMapsMarker>
    </ScriptGoogleMapsMarkerClusterer>
  </ScriptGoogleMaps>
</template>
```

## 自定义聚类渲染器

使用 `#renderer` 插槽，通过 Vue 模板渲染聚类视觉效果。

```vue
<template>
  <ScriptGoogleMaps
    :map-options="{
      center: { lat: -33.863, lng: 151.210 },
      zoom: 13,
    }"
  >
    <ScriptGoogleMapsMarkerClusterer>
      <template #renderer="{ cluster }">
        <div
          class="bg-blue-600 text-white rounded-full w-10 h-10 flex items-center justify-center font-bold text-sm shadow-lg"
        >
          {{ cluster.count }}
        </div>
      </template>

      <ScriptGoogleMapsMarker
        v-for="loc in locations"
        :key="loc.id"
        :position="loc.position"
      >
        <ScriptGoogleMapsInfoWindow>
          <strong>{{ loc.name }}</strong>
        </ScriptGoogleMapsInfoWindow>
      </ScriptGoogleMapsMarker>
    </ScriptGoogleMapsMarkerClusterer>
  </ScriptGoogleMaps>
</template>
```

## 使用自定义标记聚类

自定义 HTML 标记的聚类方式与默认图钉相同。

```vue
<script setup lang="ts">
const listings = [
  { id: 1, position: { lat: -33.856, lng: 151.215 }, price: '$850k' },
  { id: 2, position: { lat: -33.860, lng: 151.210 }, price: '$1.2M' },
  { id: 3, position: { lat: -33.865, lng: 151.205 }, price: '$720k' },
  { id: 4, position: { lat: -33.870, lng: 151.208 }, price: '$1.5M' },
  { id: 5, position: { lat: -33.858, lng: 151.220 }, price: '$950k' },
]
</script>

<template>
  <ScriptGoogleMaps
    :map-options="{
      center: { lat: -33.863, lng: 151.212 },
      zoom: 14,
    }"
  >
    <ScriptGoogleMapsMarkerClusterer>
      <ScriptGoogleMapsMarker
        v-for="listing in listings"
        :key="listing.id"
        :position="listing.position"
      >
        <template #content>
          <div class="bg-blue-600 text-white px-2.5 py-1 rounded-full font-bold text-sm">
            {{ listing.price }}
          </div>
        </template>
      </ScriptGoogleMapsMarker>
    </ScriptGoogleMapsMarkerClusterer>
  </ScriptGoogleMaps>
</template>
```